CODEWITHSUNDEEP
htmlcss
PritiJain
PritiJain

Reputation: 1

Floated element appears one line below

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

Upvotes: 0

Views: 83

Answers (2)

Maxwell s.c
Maxwell s.c

Reputation: 1668

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>

Upvotes: 1

Dakota B
Dakota B

Reputation: 138

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; }

Upvotes: 0

Related Questions