0

Here is a very simple html code to float the sidebar towards right. The browser output shows the sidebar (floated element) one line below. The link to the picture of my browser output is shown below

How come the floated element is displayed one line below? Even the main content appears one line above the floated element.

#header {
  background-color: #af7ac5;
  font-size: 90px;
}

#sidebar {
  background-color: #bdc3c7;
  font-size: 30px;
  float: right;
  width: 200px;
  display: inline-block;
}

#maincontent {
  background-color: dc7633;
  font-size: 30px;
  margin-right: 220px;
}

#footer {
  font-size: 50px;
  background-color: #2ecc71;
  clear: right;
}
<p id="header">Header</p>
<p id="sidebar">Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar
</p>


<p id="maincontent">This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content
  This is main content This is main content
</p>



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

Browser output

PeterMader
  • 6,987
  • 1
  • 21
  • 31
PritiJain
  • 1

2 Answers2

1

This happens because sidebar has an margin-top and is floated (header margin + sidebar margin).

#header{
 
 background-color :   #af7ac5 ;
 font-size : 90px;
}

#sidebar{
 
 background-color :   #bdc3c7;
 font-size : 30px;
 float : right;
 width : 200px;
    margin-top: 0;
 }


#maincontent{
  
 background-color :   dc7633 ;
 font-size : 30px;
 margin-right : 220px;
 }


#footer{
 font-size : 50px;
 background-color :  #2ecc71 ;
 clear : right;
 }
<html>
<head>
<link type ="text/css" rel="stylesheet" href="MyDesign.css" >
</head>

<body>

 <p id="header">Header</p>
 <p id="sidebar">Sidebar Sidebar Sidebar Sidebar
 Sidebar Sidebar Sidebar Sidebar
 Sidebar Sidebar Sidebar Sidebar
 Sidebar Sidebar Sidebar Sidebar
 </p>
 

 <p id="maincontent">This is main content This is main content 
 This is main content This is main content This is main content 
 This is main content This is main content This is main content
 This is main content This is main content This is main content
 This is main content This is main content This is main content
 </p>


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


</body>
</html>

Avoid using tags like p,h1 to make containers, because they have default css (margin, etc). instead, use div's or appropriated tags (aside, header, footer, main, article, etc). Example:

<body>

    <header id="header">Header</header>
    <aside id="sidebar">Sidebar Sidebar Sidebar Sidebar
    Sidebar Sidebar Sidebar Sidebar
    Sidebar Sidebar Sidebar Sidebar
    Sidebar Sidebar Sidebar Sidebar
    </aside>


    <main id="maincontent">This is main content This is main content 
    This is main content This is main content This is main content 
    This is main content This is main content This is main content
    This is main content This is main content This is main content
    This is main content This is main content This is main content
    </main>



    <footer id="footer">Footer</footer>


</body>
Maxwell s.c
  • 1,583
  • 15
  • 29
  • This isn't incorrect, but the cause is due to `

    ` tags typically having a margin before and after the element, you'll see margin tops and bottoms on all of the `

    ` elements in your code.

     – user1795832 Sep 25 '17 at 17:25
  • i've updated the answer telling to avoid using those tags – Maxwell s.c Sep 25 '17 at 17:30
  • if that's the case why the main content appears one line above the float. I mean floated element (side bar )is one line below while the main content is one line above the floated element. they both are paragraph elements. – PritiJain Sep 26 '17 at 08:40
  • Header and Main are block elements without floating, they will have collapsing margin. If header has 20px margin and main have 30px margin, their distance will be 30px. Sidebar is an floating block, the margin will not collapse with another blocks. If header has 20px margin and sidebar 30px, the distance between then will be 50px. See https://www.yourwebskills.com/margins.php – Maxwell s.c Sep 26 '17 at 16:01
0

This occurs because the <p> tag has the following default style properties: margin-top: 30px; margin-bottom: 30px; For this reason, your <p> appears to be pushed down. You could either change your <p> to a <div> to avoid the default style, or simply write a CSS rule to override: p.sidebar { margin: 0px 0px 0px 0px; }

Dakota B
  • 138
  • 9
  • if that's the case why the main content appears one line above the float. I mean floated element (side bar )is one line below while the main content is one line above the floated element. they both are paragraph elements. – PritiJain Sep 26 '17 at 08:37
  • @pritijain This is because in HTML, only the largest margin between the bottom of the first block-level element and the top of the second element is taken into account. Since the largest margin between the header and the main content is 90px, the distance between them is 90px. Since float takes an element out of flow, the sidebar is excluded in this case, but you can also see the margin between the main content and footer is only 50px (rather than 80). I'd still suggest simply setting the top margin to 0px. https://stackoverflow.com/questions/3906640/css-margins-overlap-problem – Dakota B Sep 27 '17 at 01:48
  • For better results in columnar design, I'd also suggest using [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes). – Dakota B Sep 27 '17 at 01:52