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 Code:

<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

Originally Posted by engaged

You would have to make your boxes both float to either the left or the right.

HTML Code:

<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

Originally Posted by Cushioned

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

Originally Posted by Gangster

Kk, when i go on comp, MSN dont work on my laptop.

Alrighty.

Gangster · 01-02-2009, 11:11 AM

Got a screenie

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.

Thread: Cotainers

Thread Tools

Cotainers

Posting Permissions