CODEWITHSUNDEEP
csshtmlalignment
Pradeep
Pradeep

Reputation: 1223

Aligning two divs going wrong..?

I am trying to align two div's side by side. Both the div's are contained in an another div.

This is the HTML and CSS code that i have written and it's going horribly wrong.

HTML :

<div id="content">     
 <div id="main"></div>
 <div id="sidebar"></div>     
</div>

CSS :

 #content {
    width: 1000px;        
}
#sidebar {
    width: 200px;
    float: left;
    height: 400px;
    background-color: red;
}
#main {
    width: 800px;
    margin-left: 200px;
    height: 400px;
    float: left;
    background-color: blue;
}

Here is the jsFiddle

EDIT : the code that has finally worked for me is as follows :

<div id="content">

 <div id="sidebar"></div>
 <div id="main"></div>

</div>

and the css is as follows :

#content {
    width: 1000px;
    overflow: auto;
}
#sidebar {
    width: 200px;
    height: 400px;
    float: left;
}
#main {
    width: 800px;
    height: 400px;
    margin-left: 200px;
}

I dont know the reason but...

overflow : auto;

was needed to get it displayed in a right way.

Upvotes: 0

Views: 81

Answers (5)

Marc Audet
Marc Audet

Reputation: 46785

Versatile Floats

With your mark-up, you can place the floats in any order that you require.

For example:

<h3>div.main comes first in mark-up order.</h3>
<div id="content" class="ex1">
    <div id="main"></div>
    <div id="sidebar"></div>
</div>

if you apply this CSS:

.ex1 #sidebar {
    width: 200px;
    float: left;
    height: 100px;
    background-color: red;
}
.ex1 #main {
    width: 800px;
    height: 100px;
    float: left;
    background-color: blue;
}

your side bar will appear to the right because the elements are floated left in the order that they appear in the mark-up.

In this example, I switch the HTML around so that the main element is second:

<h3>div.main comes second in mark-up order and is not floated.</h3>
<div id="content" class="ex2">
    <div id="sidebar"></div>
    <div id="main"></div>
</div>

and with this CSS:

.ex2 #sidebar {
    width: 200px;
    float: left;
    height: 100px;
    background-color: red;
}
.ex2 #main {
    width: 800px;
    height: 100px;
    margin-left: 200px;
    background-color: blue;
}

In this case, the side bar is floated left and appears first. The main element is not floated but with the left margin, it allows space for the side bar.

However, you may want the main element to be first in the mark-up (for SEO reasons...):

<h3>div.main comes first in mark-up order but appears 2nd.</h3>
<div id="content" class="ex3">
    <div id="main"></div>
    <div id="sidebar"></div>
</div>

and apply this CSS:

.ex3 #sidebar {
    width: 200px;
    float: right;
    height: 100px;
    background-color: red;
}
.ex3 #main {
    width: 800px;
    float: right;
    height: 100px;
    background-color: blue;
}

In this case, if you float to the right, the main is floated to the right first and the sidebar is also floated right but is to the left edge of the main, like the 2nd example but with different markup.

Fiddle: http://jsfiddle.net/audetwebdesign/GP29e/

Upvotes: 1

Ritesh A
Ritesh A

Reputation: 283

Checked your code. You just remove float: left from #sidebar.

#sidebar {
width: 200px;
#float: left;
height: 400px;
background-color: red;
}

Upvotes: 0

Shailender Arora
Shailender Arora

Reputation: 7778

Hey Narendera your parent div's width is 1000px and you have given margin-left to your child div's #main so that's why its going down so you should remove the margin-left:200px from child div #main

CSS

  #content {
    overflow: hidden;
    width: 1000px;
}

#main {
    background-color: blue;
    float: left;
    height: 400px;
    width: 800px;
}


#sidebar {
    background-color: red;
    float: left;
    height: 400px;
    width: 200px;
}

and through this its working fine.....see the DEMO

Upvotes: 1

user1633525
user1633525

Reputation:

Remove margin-left from the css:

#main {
    width: 800px;
    height: 400px;
    background-color: blue;
}

Upvotes: 1

j08691
j08691

Reputation: 207861

Get rid of the margin-left: 200px;

jsFiddle example

That's pushing the blue div to the right and causing the red div to drop down since there's not enough room for both to exist next to each other.

Upvotes: 1

Related Questions