PDA

View Full Version : Cotainers



Gangster
31-01-2009, 06:17 PM
How do you use them?

Because i have coded a layout, and say i type in the content box, the boxes on the right go down if you know what i mean, so i was wondering if someone could be nice enough to explain to me how to use them.

Like the CSS and HTML, what do i make the width and all that. I tried google but nothing...

engaged
31-01-2009, 06:27 PM
You would have to make your boxes both float to either the left or the right.



<html>
<head>
<title> Boxes </title>
<style>
body{}

#box1{
width: 100px;
float: left;
}

#box2{
width: 400px;
float: left;
}
</style>
</head>

<body>
<div id="box1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus, justo nec venenatis posuere, est dui tristique sem, et dictum leo justo non augue. Duis quam odio, mattis eu, vestibulum quis, laoreet eget, sem. Maecenas enim magna, congue viverra, auctor ut, condimentum a, pede. Phasellus eleifend tincidunt lectus. Vestibulum id lacus laoreet lacus sagittis vestibulum. Phasellus feugiat interdum justo. Sed et sapien et leo volutpat lacinia. Nulla consequat euismod lacus. Nam nulla nibh, dignissim vitae, tempus at, rhoncus et, arcu. Morbi vehicula, turpis et mollis viverra, leo lectus semper orci, a congue orci sapien fermentum odio. Pellentesque pretium mi non justo pharetra egestas. Nam gravida aliquam leo. Vestibulum non nisi. Donec iaculis vestibulum felis. Duis leo. Vestibulum ut erat nec pede dictum lacinia.
</div>

<div id="box2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus, justo nec venenatis posuere, est dui tristique sem, et dictum leo justo non augue. Duis quam odio, mattis eu, vestibulum quis, laoreet eget, sem. Maecenas enim magna, congue viverra, auctor ut, condimentum a, pede. Phasellus eleifend tincidunt lectus. Vestibulum id lacus laoreet lacus sagittis vestibulum. Phasellus feugiat interdum justo. Sed et sapien et leo volutpat lacinia. Nulla consequat euismod lacus. Nam nulla nibh, dignissim vitae, tempus at, rhoncus et, arcu. Morbi vehicula, turpis et mollis viverra, leo lectus semper orci, a congue orci sapien fermentum odio. Pellentesque pretium mi non justo pharetra egestas. Nam gravida aliquam leo. Vestibulum non nisi. Donec iaculis vestibulum felis. Duis leo. Vestibulum ut erat nec pede dictum lacinia.
</div>

</body>
</html>


and they should be next to eachother, if thats what you mean?

Gangster
31-01-2009, 06:43 PM
You would have to make your boxes both float to either the left or the right.



<html>
<head>
<title> Boxes </title>
<style>
body{}

#box1{
width: 100px;
float: left;
}

#box2{
width: 400px;
float: left;
}
</style>
</head>

<body>
<div id="box1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus, justo nec venenatis posuere, est dui tristique sem, et dictum leo justo non augue. Duis quam odio, mattis eu, vestibulum quis, laoreet eget, sem. Maecenas enim magna, congue viverra, auctor ut, condimentum a, pede. Phasellus eleifend tincidunt lectus. Vestibulum id lacus laoreet lacus sagittis vestibulum. Phasellus feugiat interdum justo. Sed et sapien et leo volutpat lacinia. Nulla consequat euismod lacus. Nam nulla nibh, dignissim vitae, tempus at, rhoncus et, arcu. Morbi vehicula, turpis et mollis viverra, leo lectus semper orci, a congue orci sapien fermentum odio. Pellentesque pretium mi non justo pharetra egestas. Nam gravida aliquam leo. Vestibulum non nisi. Donec iaculis vestibulum felis. Duis leo. Vestibulum ut erat nec pede dictum lacinia.
</div>

<div id="box2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus, justo nec venenatis posuere, est dui tristique sem, et dictum leo justo non augue. Duis quam odio, mattis eu, vestibulum quis, laoreet eget, sem. Maecenas enim magna, congue viverra, auctor ut, condimentum a, pede. Phasellus eleifend tincidunt lectus. Vestibulum id lacus laoreet lacus sagittis vestibulum. Phasellus feugiat interdum justo. Sed et sapien et leo volutpat lacinia. Nulla consequat euismod lacus. Nam nulla nibh, dignissim vitae, tempus at, rhoncus et, arcu. Morbi vehicula, turpis et mollis viverra, leo lectus semper orci, a congue orci sapien fermentum odio. Pellentesque pretium mi non justo pharetra egestas. Nam gravida aliquam leo. Vestibulum non nisi. Donec iaculis vestibulum felis. Duis leo. Vestibulum ut erat nec pede dictum lacinia.
</div>

</body>
</html>
and they should be next to eachother, if thats what you mean?
What i mean is, you know when you place a div, it automatically goes under the last div placed, even if you set it as "margin-top: 10px;".

So i have to set it as -123. But it's set -123px from the div last placed. So when the div last placed goes down. That box also goes down, making it look wrong. If you get me.

Cushioned
31-01-2009, 11:19 PM
Add my MSN from my sig and explain to me on there. Would be easier to help you with whatever the problem is.

Gangster
31-01-2009, 11:24 PM
Add my MSN from my sig and explain to me on there. Would be easier to help you with whatever the problem is.
Kk, when i go on comp, MSN dont work on my laptop.

Cushioned
01-02-2009, 12:07 AM
Kk, when i go on comp, MSN dont work on my laptop.

Alrighty.

Gangster
01-02-2009, 11:11 AM
Got a screenie

http://www.tehupload.com/uploads/173628d216a5ec1prob_screen.PNG

You see how that line and the boxes on the right are out of place? That's because they're set -600px from the content, so everytime the content goes down, they go down.

Want to hide these adverts? Register an account for free!