How to get 2 div's the lie next to each other

Question

How can i get my two div's to take up all the page together (10% AND 90%) and sit next to each other.

HTML:

<body>      
  <div class="header" id= "headerxx">
  </div>

  <div class="mainbody">
</div>

CSS:

body {
  background-color: #F0F0F0; 
  margin-top: 0px;
  width: 100%;
  margin-left: 0px;
}

.header {
  width: 10%;
  margin-top: 0px;
  float: left;
}

score 0 · Answer 1 · answered Apr 08 '15 at 08:22

0

Here you go (jsFiddle)

HTML

<div class="main">
    <div class="header" id= "headerxx">
    </div>

    <div class="mainbody">
    </div>

    <div class="clear">
    </div>
</div>

CSS

body {
    background-color: #F0F0F0; 
    margin-top: 0px;
    width: 100%;
    margin-left: 0px;
}

.header {
    width: 10%;
    height: 200px;
    margin-top: 0px;
    float: left;
    background-color: #000000;
 }

.mainbody {
    width: 90%;
    height: 200px;
    float: right;
    background-color: #666666;
 }

 .clear {
    clear: both;
 }

I have put the heights in for demo purposes, so you can see what is going on. In practice, you don't need these.

answered Apr 08 '15 at 08:22

Matt Maclennan

1,266
13
40

1

@OliverMurfett No it does not but it just make sense, [**learn about Clearfix here**](http://stackoverflow.com/questions/8554043/what-is-clearfix). – Ruddy Apr 08 '15 at 08:44
also, how can i make the left div 100% of the page, no more, no less, and stay fixed @Ruddy – Magna Wise Apr 08 '15 at 08:53

score 0 · Answer 2 · answered Apr 08 '15 at 08:56

If yo are targeting the latest browser you can align 2 div next to each-other using display:table and display:table-cell;.. Have a look at DEMO.

In this layout I give display:table to body element in your case you've to give this property to parent element.

CSS is

body{width:100%;  display:table;}

.header, .mainbody {
display:table-cell;
height:200px;
border:1px solid gray;
}
.header{width:10%; background:rgba(34%, 63%, 23%, 1);}
.mainbody{width:90%; background:rgba(55%, 67%, 19%, 1);}

<div class="header" id="headerxx">
  </div>

  <div class="mainbody">
</div>

score 0 · Answer 3 · answered Apr 08 '15 at 09:10

Try This.

CSS

    .container{
    position: relative;
    min-height: 100%;
}
.leftDiv{
    float: left;
    min-height: 100%;
    background: #f0f0f0;
    width: 10%;
}
.rightDiv{
    float: left;
    background: blue;
    color: white;
    width:90%;
    height: 100%;
}

HTML

<div class="container">
<div class="leftDiv">
        <p>This is the left div</p>
</div>
<div class="rightDiv">
    <p>This is the Right Div</p>
</div>

Can't understand your coding. The best interpretation I could come up is that you want 2 divs lie next to each other, so I made a parent div .container here, position it to relative so that all its children divs will rely on it for positioning and dimensions, I also give it min height of 100% for demo purposes. Then the divs that lie next to each other are the .leftDiv and the .rightDiv, each floated left so that the element next to it will take the remaining space of the parent it didn't cover. Also I gave it widths 10% and 90%, and a height of 100% again for demo purposes.

How to get 2 div's the lie next to each other

3 Answers3