Below print screen from google chrome html/css view.
One element under another, margin: 10px;, so they should be 20px from each other.
But they aren't. They are 10px apart, like the margins are connected.
body {
margin: 0;
background-image: url("2.png");
background-repeat: repeat-x;
font-family: 'Verdana';
font-size: 17px;
}
#logo {
background-image: url("logo.png");
width: 527px;
height: 58px;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
margin-top: 7px;
}
.hidden {
display: none;
}
.nav {
background-color: #55585d;
height: auto;
margin-top: 10px;
border-bottom: 2px solid #44474c;
border-top: 2px solid #44474c;
text-align: center;
}
.nav > ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.nav > ul li {
display: inline-block;
padding: 5px;
margin-right: 30px;
font-weight: 700;
}
/* 1195px width */
#center {
width: 1195px;
margin-left: auto;
margin-right: auto;
}
#container {
width: 864px;
min-height: 500px;
margin-left: 16px;
float: left;
}
.post {
width: 392px;
height: 453px;
box-shadow: 3px -3px 6px 0px #000000,
-1px 1px 1px 0px #000000;
margin: 10px;
float: left;
}
#aside {
width: 315px;
float: left;
min-height: 500px;
}
.abox1 {
margin: 10px;
width: 279px;
height: 453px;
box-shadow: 3px -3px 6px 0px #000000,
-1px 1px 1px 0px #000000;
}
<!DOCTYPE html>
<html lang="pl">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<title>Devloger</title>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<div id="logo"></div>
<h1 class="hidden">Devloger</h1>
<nav>
<div class="nav">
<ul>
<li>
Strona Główna
</li>
<li>
Kategorie
</li>
<li>
Spis Treści
</li>
<li>
Współpraca
</li>
<li>
Kontakt
</li>
</ul>
</div>
</nav>
</header>
<div id="center">
<main>
<div id="container">
<div class="post">
</div>
<div class="post">
</div>
<div class="post">
</div>
<div class="post">
</div>
<div class="post">
</div>
<div class="clear" style="clear: both;"></div>
</div>
</main>
<aside>
<div id="aside">
<div class="abox1">
</div>
<div class="abox1">
</div>
<div class="abox1">
</div>
</div>
</aside>
</div>
<div class="clear" style="clear: both;"></div>
</body>
</html>
There are cases (you can read about it here) where margins between elements are collapsed (overlapped, one on top of the other), and this is an intended behaviour, so it's not an error.
This is one of these cases and your current issue:
Adjacent siblings
The margins of adjacent siblings are collapsed (except when the later sibling needs to be cleared past floats).
First you have some .post blocks with that margins, but these margins are working well because that blocks are floated. If you remove float: left from .post class you will see that these blocks margins are collapsed as well.
Knowing that margin collapsing exists, you can take it into account when designing layouts:
Page flow goes from left to right, top to bottom. So instead of define a margin-top and margin-bottom, define only a margin-bottom.
aside {
width: 315px;
float: left;
min-height: 500px;
}
.abox1 {
margin: 0 10px 20px 10px;
width: 279px;
height: 453px;
box-shadow: 3px -3px 6px 0px #000000,
-1px 1px 1px 0px #000000;
}
<aside>
<div class="abox1"></div>
<div class="abox1"></div>
<div class="abox1"></div>
</aside>
Related
I cannot get my .container{} to encompass all the content on my web page. My lower navigation buttons are sitting outside the container (marked by a 1px black border) and I can't figure out why. I'm not sure where I've went wrong in my CSS or HTML code! Thanks in advance for your help. Here is a link to my CodePen: https://codepen.io/IDCoder/pen/rGWeEE?editors=0100
Here are my code snippets:
<html>
<head>
<title>Ms.Jane Equities Management Corp</title>
</head>
<body>
<div class="container-fluid">
<!-- Top Box -->
<div class="wrap">
<div class="Logos">
<img src="https://s26.postimg.org/iqkxecqnd/Coldwell_Banker-_Logo_RS1.jpg" width="150" height="82"/>
<img src="https://s26.postimg.org/iqkxecqnd/Coldwell_Banker-_Logo_RS1.jpg" width="150" height="82"/> </div>
<div class ="nav wrap">
<!--navigation buttons-->
<ul class="navigation">
<li id="NAV-ONE">LOG IN</li>
<li id="NAV-TWO">BUY A HOME</li>
<li id="NAV-THREE">SELL A HOME</li>
<li id="NAV-FOUR">CONTACT US</li>
</ul>
</div>
</div>
<!-- Middle Box -->
<div class="row two">
<div>
<div class="floater box">
<!--<div class="search box wrap">
<div class="search">
<input type="text" class="searchTerm" placeholder="What are you looking for?">
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
</div>-->
</div>
</div>
</div>
<!-- Bottom Box -->
<div class="row three">
<div class ="nav wrap 2">
<!--navigation buttons-->
<ul class="navigation">
<li id="NAV-A">MY LISTINGS</li>
<li id="NAV-B">COMMUNITIES SERVED</li>
<li id="NAV-C">PROPERTIES</li>
</ul>
</div>
</div>
</div>
</body>
<html>
CSS:
.container-fluid{
border: 1px solid #000000;
max-width: 1600px;
/*overflow: hidden;*/
}
.wrap{
background-color: yellow;
display: inline: flex;
/*overflow: hidden;*/
}
.Logos{
width: 55%;
display: inline-block;
background-color: blue;
}
.nav.wrap{
display: inline-block;
background-color: green;
float: right;
margin-top: 25px;
}
ul.navigation{
font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
/*text-align center;*/
/*border: 1px solid green;*/
/*overflow: hidden;*/
}
.navigation li {
display: inline-block;
}
.navigation a {
background: #395870;
background: linear-gradient(#49708f, #293f50);
border-right: 1px solid rgba(0, 0, 0, .3);
color: #fff;
padding: 12px 20px;
text-decoration: none;
}
.navigation a:hover {
background: #314b0;
box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3);
}
.navigation li:first-child a {
border-radius: 4px 0 0 4px;
}
.navigation li:last-child a {
border-right: 0;
border-radius: 0 4px 4px 0;
}
.row.two{
background-image: url(https://s1.postimg.org/5gvbly4hin/East_Hyde_Park_Chicago_aerial_0470.jpg);
background-position: absolute;
background-size:cover;
background-repeat: no-repeat;
max-width: 1600px;
height: 550px;
margin: auto;
}
.floater.box{
background-color: white;
border-radius: 10px;
opacity: .45;
max-width: 75%;
height: 200px;
position: absolute;
top:50%;
left: 0;
right: 0;
margin: auto;
}
/*.search {
width: 50%;
position: relative
}
.searchTerm {
float: left;
width: 100%;
border: 3px solid #00B4CC;
padding: 5px;
height: 20px;
border-radius: 5px;
outline: none;
color: #9DBFAF;
}
.searchTerm:focus{
color: #00B4CC;
}
.searchButton {
position: absolute;
right: -50px;
width: 40px;
height: 36px;
border: 1px solid #00B4CC;
background: #00B4CC;
text-align: center;
color: #fff;
border-radius: 5px;
cursor: pointer;
font-size: 20px;
}
.search.box.wrap{
width: 30%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
*/
I think your div.nav.wrap is getting pushed down because it's floated and there's no room for it in the container and because it's floated the container doesn't adjust for it. If you remove the float, you'll see the container start to contain it. That's normal float behaviour - elements with float are out of the 'flow' of the document so other elements aren't affected by them.
I'd just add a negative top margin to push it back up. I'd usually do this in rem or depending on how you size the nav height. So your existing .nav.wrap rule would become:
.nav.wrap{
display: inline-block;
background-color: green;
float: right;
margin-top: -35px;
}
I'm making a 960px template and I'm experiencing a problem when squeezing the browser window. The box-shadow on the right is gone whenever I make the window smaller than my elements min-width. Why is that happening?
HTML:
<!DOCTYPE html>
<html>
<head>
<?$APPLICATION->ShowHead();?>
<title><?$APPLICATION->ShowTitle();?></title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="panel">
<?$APPLICATION->ShowPanel();?>
</div>
<div class="container">
<header>
<div class="logotype">
<img src="<?=SITE_TEMPLATE_PATH?>/images/logotype.png">
</div>
<div class="login">
<a>Вход</a>
</div>
<div class="info">
<p>Уфа, Софьи Перовской 54</p>
<p>7 (347) 266-69-54</p>
<p>info#ufawell.ru</p>
</div>
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
</header>
<?
if(!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true)
die();
?>
<footer>
<div class="copyright">
<p>© «ИП Тухватуллин Р.Р.», 2015.</p>
</div>
</footer>
</div> <!--.container-->
</body>
</html>
CSS:
#panel {min-width: 960px;}
body {background: url(images/bg-2.jpg) no-repeat ; background-size: cover;}
.container {
width: 960px;
min-height: 800px;
position: relative;
margin: 10px auto;
background-color: #f3f3f3;
box-shadow: 3px 3px 8px #9c9c9c;
-moz-box-shadow: 3px 3px 8px #9c9c9c;
-webkit-box-shadow: 3px 3px 8px #9c9c9c;
box-shadow: 3px 3px 8px #9c9c9c;
}
/*
header {height: 100px; padding: 10px; width: 940px;}
.logotype {width: 200px;}
.logotype img {padding: 0 0 10px 0;}
.login {width: 200px;}
.info{width: 200px;}
nav {background-color: #961c00; width: 940px;}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
height: 30px;
}
nav ul li {
display: inline-block;
width: 80px;
}
footer .copyright {padding: 5px; width: 950px; background-color: #c1c1c1; bottom: 0px; position: absolute;}
*/
Its because box-shadow is not an actual object. Meaning that the width of .container is not calculated with the shadow width.
Add a small padding to your body. E.g padding: 5px; and the shadow will still be visible.
body {background: url(images/bg-2.jpg) no-repeat ; background-size: cover; padding: 5px;}
or add a media query that makes the container 100% of the viewport width minus the shadow.
#media only screen and (max-width: 800px){
.container {
width: calc(100vw - 10px);
min-width: 0;
}
}
Hi guys I have a question that is why does the whole page of my website move slightly to the left (10 - 30 px or so) when I insert an image and goes back to normal when I remove it. Any help at all is appreciated.
Html code-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="description" content="Random Text">
<meta name="keywords" content="Random words">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>X</title>
<link href="menusheet.css" rel="stylesheet" type="text/css">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="header">
<div id="logo"><img src="images/bar.png" alt="knives"/></div>
</div>
<div id="wrapper">
<!-- Black Menu -->
<div id="menu_wrapper" class="black">
<div class="left"></div>
<ul id="menu">
</div>
</div>
<div id="content">
<div id="container">
<div id="adsense">
</div>
<div id="stepsbox">
</div>
</div>
<h4>Factory edges</h4><img src="images/factoryangle.png" alt="Factory angles" style="float:left; margin-right: 20px; width: 175px; height: 175px;"/>
</div>
<div id="footer">
<div id="footerleft">
<ul>
<li>Home</li>
<li>Site Map</li>
</ul>
</div>
<div id="footercenter">
© 2013 x.com
</div>
</div>
CSS -
body {
width: 960px;
margin: 0 auto;
font-family: Arial, Verdana, sans-serif;
color: black;
background-image: url(images/bg.jpg) ;
background-repeat: no-repeat;
background-size: cover;
}
#wrapper {
width: 960px;
margin: 0 auto;
}
#content {
width: 920px;
height: 100%;
overflow: hidden;
background-color: white;
padding: 0px 20px 0px 20px;
margin: 0px 0px 0px 0px;
}
#container {
width: 300px;
height: 550px;
float: right;
background-color: black;
margin-left: 10px;
}
#adsense {
width: 300px;
height: 250px;
float: right;
background-color: yellow;
}
#stepsbox {
float:right;
width: 250px;
height: 220px;
padding: 15px 15px 15px 15px;
background-color: #E0E0E0;
margin: 10px 0px 5px 10px;
}
#header {
height: 70px;
background: white;
width: 960px;
margin: 0 auto;
}
#footer {
height: 60px;
font-size: 80%;
padding: 5px 5px 5px 5px;
background-color: #333333;
color: white;
}
#footerleft {
width: 300px;
height: 50px;
float: left;
}
#footercenter {
width: 620px;
height: 40px;
float: right;
text-align: right;
padding: 5px 5px;
border-style:solid;
border-width:5px;
}
Can't seen your images... :D, But in your places I insert into css this code
img{
margin: 0px;
padding: 0px;
border: 0px;
}
This remove any spaces aruound the images tag... try it and look forward...
It, Would be grate if you insert a image link... :)
EASLY to understand
Talking about which image "logo" or
<h4>Factory edges</h4><img src="images/factoryangle.png" alt="Factory angles" style="float:left; margin-right: 20px; width: 175px; height: 175px;"/>
if Factory edge is the image then add one after
<h4>Factory edges</h4><br />
<img src="images/factoryangle.png" alt="Factory angles"style="float:left; margin:0 20px 0 0; width:175px; height:175px;" />
Also add this in style
#content{margin:0 auto; }
with other properties in content
I think this will do, if not please explain in detail.. :)
I have a flow layout with following two alignment issues
Refer Image 1: When I change the zoo, the title info overlaps the logo.
Refer Image 2: The green box should come as right side of the blue box; currently it is coming on bottom.
How can I correct it? The code is available in this fiddle . Posted here also.
I am sure it is a very basic alignment lesson; however I am not able to figure it out even after many hours? Can you please take a look at it and answer?
Image 1
Image 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>Support Site </title>
<link href="Styles/MasterStyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="header">
<div id="logo">
<img alt="logo" src="Images/Logo.bmp" />
</div>
<div id="titleInfo">
Admin XXXXXXXX Support Site
<div id="signOut">
<a id="logOnStatus" class="signOut" >
Logout</a>
</div>
</div>
<div class="clear">
</div>
</div>
<div id="centralContainer">
<div id="leftNavContainer">
<div id="subContainerForLeftNav">
<div id="adminDiv">
<div class="backgroundButton" id="adminButton">
<p class="buttonText">
The Admin</p>
</div>
</div>
<div class="clear">
</div>
<div id="vendorDiv">
<div class="menuTextHeading">
<a class="menuText">The Management</a>
</div>
<div class="buttonAlign">
<div class="backgroundButton" id="connectivityButton">
<p class="buttonText">
Test</p>
</div>
<div class="backgroundButton" id="vendorsButton">
<p class="buttonText">
Test</p>
</div>
</div>
</div>
<div class="clear">
</div>
<div id="monitoringDiv">
<div class="menuTextHeading">
<a class="menuText">Test</a>
</div>
<div class="buttonAlign">
<div class="backgroundButton" id="transactionsButton">
<p class="buttonText">
Test</p>
</div>
<div class="backgroundButton" id="logsButton">
<p class="buttonText">
Test</p>
</div>
</div>
</div>
</div>
</div>
<div id="mainContainer">
<div id="transactionContentHolder" class="transactionContentHolder">
A
</div>
</div>
<div class="clear">
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body
{
margin: 0px;
padding: 0px;
text-align: center;
background: Yellow;
}
#wrapper
{
width: 100%;
height: auto;
text-align:left;
margin: 0 auto;
/*background: #FFBA31;*/
background: #FFBA31;
}
#container
{
width: 100%;
height: auto;
margin: 0 auto;
background: white;
}
#header
{
width: 100%;
height: 70px;
background: white;
padding: 0 0 10px 0;
border:1px solid Red;
}
#titleInfo
{
font:bold 18pt Arial;
color:#2377D1;
width:80%;
height:35px;
float:right;
margin:10px 0 0 10px;
border-bottom:3px solid #fcda55;
padding: 10px 0 0 0;
display:inline;
}
#signOut
{
font:bold 9pt Arial;
float:right;
border-bottom:none;
padding: 0px 10px 0 0;
margin: 0px 0px 30px 0;
display:inline;
}
#logo
{
width:15%;
height:60px;
float:left;
margin:0 0 0 20px;
display:inline;
padding: 10px 0 30px 0;
}
#centralContainer
{
width: 100%;
height:auto;
margin: 0 auto;
background: white;
}
#leftNavContainer
{
width: 20%;
height: 700px;
/*float: left;*/
margin: 0 0 0 10px;
display: inline;
background: white;
border:1px solid Blue;
}
#subContainerForLeftNav
{
width: 190px;
height: auto;
}
#mainContainer
{
width: 75%;
height: 700px;
float: left;
margin: 0 0 0 30px;
display: inline;
background:white;
border:1px solid Green;
}
.menuText
{
font:bold 13pt Arial;
line-height:15pt;
color:#00A6B5;
}
.menuTextHeading
{
height:20px;
border-bottom:3px solid #fcda55;
padding:10px 0 10px 0;
margin:0 0 10px 0;
}
.buttonAlign
{
height:auto;
width:auto;
float: right;
padding:0 0 0 0;
margin:0 0 0 0;
}
.backgroundButton
{
width:150px;
height:86px;
display: block;
margin: 0px 0px 5px 0px;
background-image:url('../Images/ButtonBackground.bmp');
}
.buttonText
{
font:bold 15pt Arial;
line-height:18pt;
color:#ffffff;
padding:40px 15px 0 15px;
margin:0 0 0 0;
text-align:center;
}
.clear
{
clear: both;
}
see fiddle for code and demo
fiddle: http://jsfiddle.net/L3And/3/
demo: http://jsfiddle.net/L3And/3/embedded/result/
Screen Shot:
body {
margin: 0px;
padding: 0px;
text-align: center;
background: Yellow;
}
#wrapper {
width: 100%;
height: auto;
text-align: left;
margin: 0 auto;
/*background: #FFBA31;*/
background: #FFBA31;
}
#container {
width: 100%;
height: auto;
margin: 0 auto;
background: white;
}
#header {
background: none repeat scroll 0 0 white;
border: 1px solid Red;
height: 70px;
margin-bottom: 20px;
padding: 0 0 10px;
width: 100%;
}
#titleInfo {
border-bottom: 3px solid #FCDA55;
color: #2377D1;
float: right;
font: bold 18pt Arial;
height: 35px;
margin: 10px 0 0 10px;
overflow: hidden;
padding: 10px 0 0;
width: 55%;
}
#signOut {
font: bold 9pt Arial;
float: right;
border-bottom: none;
padding: 0px 10px 0 0;
margin: 0px 0px 30px 0;
display: inline;
}
#logo {
border: 1px solid orange;
float: left;
height: 32px;
margin: 03px 0 0 20px;
padding: 10px 0 30px;
width: 15%;
}
#centralContainer {
width: 100%;
height: auto;
margin: 0 auto;
background: white;
}
/*Elements within centralContainer*/
#leftNavContainer {
background: none repeat scroll 0 0 #CCCCCC;
border: 1px solid Blue;
float: left;
height: 700px;
margin: 0 0 0 10px;
width: 20%;
}
#subContainerForLeftNav {
width: 190px;
height: auto;
/*border:1px solid green;*/
}
#mainContainer {
background: none repeat scroll 0 0 white;
border: 1px solid Green;
height: 700px;
margin: 0 0 0 219px;
width: 76%;
}
.menuText {
font: bold 13pt Arial;
line-height: 15pt;
color: #00A6B5;
}
.menuTextHeading {
height: 20px;
border-bottom: 3px solid #fcda55;
padding: 10px 0 10px 0;
margin: 0 0 10px 0;
}
.buttonAlign {
height: auto;
width: auto;
float: right;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
.backgroundButton {
width: 150px;
height: 86px;
display: block;
margin: 0px 0px 5px 0px;
background-image: url('../Images/ButtonBackground.bmp');
}
.buttonText {
font: bold 15pt Arial;
line-height: 18pt;
color: #ffffff;
padding: 40px 15px 0 15px;
margin: 0 0 0 0;
text-align: center;
}
.clear {
clear: both;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>Support Site</title>
<link href="Styles/MasterStyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="header">
<div id="logo">
<img alt="logo" src="Images/Logo.bmp" />
</div>
<div id="titleInfo">
Admin XXXXXXXX Support Site
<div id="signOut">
<a id="logOnStatus" class="signOut">
Logout</a>
</div>
</div>
<div class="clear">
</div>
</div>
<div id="centralContainer">
<div id="leftNavContainer">
<div id="subContainerForLeftNav">
<div id="adminDiv">
<div class="backgroundButton" id="adminButton">
<p class="buttonText">
The Admin</p>
</div>
</div>
<div class="clear">
</div>
<div id="vendorDiv">
<div class="menuTextHeading">
<a class="menuText">The Management</a>
</div>
<div class="buttonAlign">
<div class="backgroundButton" id="connectivityButton">
<p class="buttonText">
Test</p>
</div>
<div class="backgroundButton" id="vendorsButton">
<p class="buttonText">
Test</p>
</div>
</div>
</div>
<div class="clear">
</div>
<div id="monitoringDiv">
<div class="menuTextHeading">
<a class="menuText">Test</a>
</div>
<div class="buttonAlign">
<div class="backgroundButton" id="transactionsButton">
<p class="buttonText">
Test</p>
</div>
<div class="backgroundButton" id="logsButton">
<p class="buttonText">
Test</p>
</div>
</div>
</div>
</div>
</div>
<div id="mainContainer">
<div id="transactionContentHolder" class="transactionContentHolder">
A
</div>
</div>
<div class="clear">
</div>
</div>
</div>
</div>
</body>
</html>
this might help you fiddle
I have following HTML layout
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
margin:10px 0px 0px 0px;
font-size: 11px;
font-family: Arial,Tahoma, sans-serif;
background: #fff;
color: #444;
}
h1 {
font-size:1.5em;
font-weight: bold;
}
#container {
width: 920px;
margin: 0 auto;
background-color: red
}
#header {
border: 2px solid #ccc;
height: 80px;
}
#content{
display: block;
width: 100%
}
#left {
clear: left;
float: left;
width: 660px;
border: 2px solid #ccc;
margin:0 0 10px 0;
padding:20px;
}
#right {
position: relative;
margin: 0 5px 0 5px;
padding: 5px 0px 0px 0px;
float: right;
width: 200px;
border: 2px solid #ccc;
}
#footer {
clear: both;
border: 2px solid #ccc;
padding: 10px 0 20px 0;
margin: 20px 0 0 0;
font-size: .9em;
color: #9b9b9b;
width: 100%;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="container">
<div id="header" >
<h1>Header</h1>
</div>
<div id="content">
<div id="left">
<h1>Left</h1>
</div>
<div id="right">
<h1>Right</h1>
</div>
</div>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
</body>
</html>
My problem is #container doesn’t hold the #left & #right contents, it only holds #header
Please refer attached imaged to see what my intended layout is.
You can add an empty element that has 'clear:both' at the end of the container:
<div id="container">
<div id="header" >
<h1>Header</h1>
</div>
<div id="content">
<div id="left">
<h1>Left</h1>
</div>
<div id="right">
<h1>Right</h1>
</div>
<div style="clear:both"> </div>
</div>
</div>
I was able to achieve the intended result by using overflow: hidden; property
#container {
width: 920px;
margin: 0 auto;
background-color: red;
overflow: hidden;
}
Use a clearfix solution i.e.
common un-obtrusive clearfix solution