CODEWITHSUNDEEP
csshtmlcss-floatcss-position
Frederik Witte
Frederik Witte

Reputation: 1345

Floating div one beside the other - 2 column layout

http://optimalpages.de/DrupalMusi/

How can I position the main content div in the middle without it collapsing to the left, when left sidebar is shorter than the content? Is that possible? I don't want to use a fixed height for the navigation, but can I somehow say "sidebarleft height = content height", or is there an easier way?

Thanks!

Upvotes: 1

Views: 324

Answers (4)

Mr. Alien
Mr. Alien

Reputation: 157424

Actually you are floating only elements to the left without any wrapper element, so what happens is this..

enter image description here

Instead, wrap the other 2 elements inside a wrapper element and than float it to the left

enter image description here

.left_wrap {
    float: left;
    width: 30%;
}

.right_wrap {
    float: left;
    width: 70%;
}

.right_wrap > div {
    border: 3px solid #ff0;
    height: 100px;
}


<div class="main">
    <div class="left_wrap">
        Hello
    </div>
    <div class="right_wrap">
        World
        <div></div>
        <div></div>
    </div>
</div>

Demo

Better Demo

If you want even a better one, I would suggest you to wrap the boxes inside the parent containers, and instead of floating the child elements, float the parent.

enter image description here

Demo

Also, don't forget to clear your floated elements, just make sure you clear them, you can use a self clearing parent CSS like

.clear:after {
   content: "";
   clear: both;
   display: table;
}

And call the above class on the element containing floated elements as their children, where in this case, it's <div class="main"> so it should be now

<div class="main clear">
   <!-- Floated Elements -->
</div>

Upvotes: 2

Lijo
Lijo

Reputation: 6788

we can use margins to set the div position .we can either specify fixed margins or we can give percentage value ,so that it will based on the total size of the screen.

<!DOCTYPE html>
    <html>
    <head>
    <style>
    #main
    {
    background-color:yellow;
    }
    #main
    {
    margin-top:100px;
    margin-bottom:100px;
    margin-right:50px;
    margin-left:50px;
    }
    </style>
    </head>

    <body >
    <div id="main">
    this is how we can display main div in centre
    </div>
    </body>

    </html>

enter image description here

Upvotes: 0

Alexis Wilke
Alexis Wilke

Reputation: 20828

This can be quite complex depending on your existing theme.

I wrote this page a while back to shows you how you can do that.

http://linux.m2osw.com/3columns

More or less you need a first div that encompasses the left column and the content. That div is the one that gets centered.

To make it simpler you can set a specific width to the div and you get something like this:

div.page
{
  width: 900px;
  margin: 0 auto;
}

That will center the main div.

For the column and the content, both are float: left; div's. In order to "close" the lot, you want another div just before closing the main div. That one has a style that ensures that the main div has the correct size: clear: both;.

Upvotes: 0

jansmolders86
jansmolders86

Reputation: 5759

I'm not quite sure if this is what you mean but try:

 #node-29{
    float: right;
    clear: left;
    margin-left: 0;
 }

This will position the div's next to each other and keep the main content to the right.

Upvotes: 0

Related Questions