Trying to position 2 blocks next to each other

Question

I'm creating a webpage and trying to create the basic outline of my site by using div tags, however, I made a side-navigation div and body div. The size of my site is 1500px width and 1000px height, the side-navigation is 300px and body is 1200px.

I thought this would place them side by side, but, the body div, for some reason, went underneath the side-navigation div.

<body>
<div id="encase">
    <div id="topNav">
        <p> topNav </p>
    </div>
    <div id="header">
        <p> header</p>
    </div>

    <div id="wholeBody">
        <div id="sideNav">
            <p> sideNav </p>
        </div>
        <div id="body1">
            <p> body1 </p>
        </div>
    </div>

    <div id="footer">
        <p> footer </p>
    </div>
</div>

and this is the css

<style>
#encase {
width: 100%;
height: 100%; 
margin-left: auto;
margin-right: auto;
}
#header {
background-color:black;
width: 1490px;
height:110px;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
#topNav {
background-color:green;
width: 1490px;
height: 50px;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
#wholeBody {
background-color: red;
width: 1490px;
height: 690px;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
#sideNav {
background-color: yellow;
width: 290px;
height: 690px;
/*margin-left: 10.25%;*/
padding: 5px;
}
#body1 {
background-color: purple;
width: 1190px;
height: 690px;
margin-left: 16%;
padding: 5px;
}
#footer {
background-color: blue;
width: 1490px;
height: 110px;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
</style>

I tried to do this using percentages as well, but, percentages don't seem to work properly for me. Does anyone have any idea of how to solve my problem? Thank You.

EugenSunic · Answer 1 · 2015-08-06T14:10:58.960

1

Just include a float:left inside your sideNav class in order to push the other div to the right,

fiddle url: https://jsfiddle.net/eugensunic/j030jyjm/

#sideNav {
float:left;
background-color: yellow;
width: 290px;
height: 690px;
/*margin-left: 10.25%;*/
padding: 5px;
}

edited Aug 06 '15 at 14:10

answered Aug 06 '15 at 13:53

EugenSunic

13,162
13
64
86

score 1 · Answer 2 · answered Aug 06 '15 at 13:57

1

Float your side nav to left. This should fix your problem.

#sideNav {
  background-color: yellow;
  width: 290px;
  height: 690px;
  float: left;
  padding: 5px;
 }

answered Aug 06 '15 at 13:57

King Size

397
1
6

score 1 · Answer 3 · answered Aug 06 '15 at 14:07

Divs are block elements - this means that, by default, each new div will start on a new line. So we need to cancel that behavior via CSS. We can use the "float" property to make the divs move next to each other:

#sideNav {
    background-color: yellow;
    width: 290px;
    height: 690px;
    /*margin-left: 10.25%;*/
    padding: 5px;
    float: left;
}

Once you add in the float, you can switch this all back to % and it will work fine, too.

In the future, I would encourage you to look at HTML5, if possible, as it has better tag names that can reduce the number of divs you are using. This makes for cleaner, more readable code.

score 0 · Answer 4 · answered Aug 06 '15 at 13:59

0

Your calculation about the width is wrong, you are using margin-left: 16% in #body1 which is one of the factors causing this problem otherwise float:left would have fixed the problem.

Check out this fiddle: https://jsfiddle.net/4jnbb5w3/

answered Aug 06 '15 at 13:59

Aayushi Jain

2,861
2
29
36

Trying to position 2 blocks next to each other

4 Answers4