Menu
I have a simple HTML template like this
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin:0px;
padding:0px;
}
<!--Resetter rules for browsers-->
#bodyContainer {
border:green 2px solid;
}
body {
border:black 2px solid;
background-color : grey;
padding:5px;
}
#header {
background-color : red;
width:70%;
height:80px;
border:black 2px solid;
padding:5px;
}
#header1 {
display:inline-block;
width:50%;
border:green 2px solid;
}
#header2 {
display:inline-block;
width:50%;
border:green 2px solid;
}
</style>
</head>
<body>
<div id="bodyContainer">
<div id="header">
<div id="header1"><h1>Welcome</h1></div>
<div id="header2"><h1>You Get to choose better !! </h1></div>
</div>
<div id="content">
<div id="contentHeader">
<p>You Select ... We Serve </p>
</div>
<div id="nav">
<ul id="navmenu">
<li><a href="#">Home</a></li>
<li><a href="#">Electronics</a></li>
<li><a href="#">Fashions</a></li>
</ul>
</div>
</div>
<div id="sidebar">
</div>
<div id="footer">
<p>WebApp Version Numbered v1.0. All rights Reserved. </p>
</div>
</div>
</body>
</html>
But when I set the width to 50% for the divs having ids as header1 and header2 they tend not to occupy the entire space of the parent container div having id header and be aligned horizontally side by side. Why is it so ?
Am I missing something here ? Please explain the basics as I am a newbie to HTML and CSS.
574
try this ..
#header {
background-color: red;
width: 70%;
height: 100%;
border: black 2px solid;
padding: 5px;
}
U may be responsive properly .
182
First thing is remove padding from #header, then you give 2px border to both #header1 and #header2 Remove it border: 2px solid green;
And another thing is display:inline-block takes white-space in the html. So, remove whitespace between both div #header1 and #header2.
Like: <div id="header1"><h1>Welcome</h1></div><div id="header2"><h1>You Get to choose better !! </h1></div>
Here also i give vertical-align:top to make then vertically top.
*{
margin:0px;
padding:0px;
}
<!--Resetter rules for browsers-->
#bodyContainer {
border:green 2px solid;
}
body {
border:black 2px solid;
background-color : grey;
padding:5px;
}
#header {
background-color : red;
width:70%;
height:80px;
border:black 2px solid;
}
#header1 {
display:inline-block;
width:50%;
vertical-align: top;
}
#header2 {
display:inline-block;
width:50%;
vertical-align: top;
}<div id="bodyContainer">
<div id="header">
<div id="header1"><h1>Welcome</h1></div><div id="header2"><h1>You Get to choose better !! </h1></div>
</div>
<div id="content">
<div id="contentHeader">
<p>You Select ... We Serve </p>
</div>
<div id="nav">
<ul id="navmenu">
<li><a href="#">Home</a></li>
<li><a href="#">Electronics</a></li>
<li><a href="#">Fashions</a></li>
</ul>
</div>
</div>
<div id="sidebar">
</div>
<div id="footer">
<p>WebApp Version Numbered v1.0. All rights Reserved. </p>
</div>
</div>Check Fiddle.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
