<html>
<style>
#wrapper{
width: 960px;
margin: 0;
border:dashed yellow;
background-color: orange;
}
header{
float: left;
width: 960px;
border: dotted blue;
}
nav{
float: left;
width: 960px;
border: thin double pink;
}
article{
float: left;
width: 730px;
margin-left: 115px;
margin-right: 115px;
border: groove black;
background-color: white;
}
#sec1{
float: left;
width: 270px;
height: 500px;
margin-left: 45px;
margin-right: 45px;
margin-top: 50px;
background-color: turquoise;
border-radius: 10px;
}
#h1sec1{
float: left;
width: 100%;
text-align: center;
}
#psec1{
float: left;
width: 100%;
}
#sec2{
float: left;
width: 270px;
height: 500px;
margin-left: 45px;
margin-right: 45px;
margin-top: 50px;
background-color: turquoise;
border-radius: 10px;
}
#h1sec2{
float: left;
width: 100%;
text-align: center;
}
#psec2{
float: left;
width: 100%;
}
</style>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div id="wrapper">
<header></header>
<nav></nav>
<article>
<section id="sec1">
<h1 id="h1sec1">Section 1</h1>
<p id="psec1"></p>
</section>
<section id="sec2">
<h1 id="h1sec2">Section 2</h1>
<p id="psec2"></p>
</section>
<section id="sec1">
<h1 id="h1sec1">Section 1</h1>
<p id="psec1"></p>
</section>
<section id="sec2">
<h1 id="h1sec2">Section 2</h1>
<p id="psec2"></p>
</section>
</article>
</div>
</body>
</html>
Wrapper will not surround article tag and contents. I'm not sure if this is just a simple math error on my part, or if the I need to adjust the margins and float it. Either way, please help me out here.
Changes done in the code:
Removed all float:left from the style.As it bring the child element out of its parent
Gave display:inline-block for all sections so that they can come in one row if width is available by behaving as an inline element.
removed the ids sec1,h1sec1,psec1,sec2,h1sec2 & psec2 and added classes sec,h1sec & psec as they were having common styles and we should always use unique id for each element.
#wrapper {
width: 960px;
margin: 0;
border: dashed yellow;
background-color: orange;
}
header {
width: 960px;
border: dotted blue;
}
nav {
width: 960px;
border: thin double pink;
}
article {
width: 730px;
margin-left: 115px;
margin-right: 115px;
border: groove black;
background-color: white;
}
.sec {
display: inline-block;
width: 270px;
height: 500px;
margin-left: 45px;
margin-right: 45px;
margin-top: 50px;
background-color: turquoise;
border-radius: 10px;
}
.h1sec {
width: 100%;
text-align: center;
}
.psec {
width: 100%;
}
<html>
<style>
</style>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div id="wrapper">
<header></header>
<nav></nav>
<article>
<section class="sec">
<h1 class="h1sec">Section 1</h1>
<p class="psec"></p>
</section>
<section class="sec">
<h1 class="h1sec">Section 2</h1>
<p class="psec"></p>
</section>
<section class="sec">
<h1 class="h1sec">Section 1</h1>
<p class="psec"></p>
</section>
<section class="sec">
<h1 class="h1sec">Section 2</h1>
<p class="psec"></p>
</section>
</article>
</div>
</body>
</html>
You just need a method of "clearing the floats"...a so-called "ClearFix"
There are number of methods discussed here.
#wrapper {
width: 960px;
margin: 0;
border: dashed yellow;
background-color: orange;
overflow:auto;
}
#wrapper {
width: 960px;
margin: 0;
border: dashed yellow;
background-color: orange;
overflow:auto;
}
header {
float: left;
width: 960px;
border: dotted blue;
}
nav {
float: left;
width: 960px;
border: thin double pink;
}
article {
float: left;
width: 730px;
margin-left: 115px;
margin-right: 115px;
border: groove black;
background-color: white;
}
#sec1 {
float: left;
width: 270px;
height: 500px;
margin-left: 45px;
margin-right: 45px;
margin-top: 50px;
background-color: turquoise;
border-radius: 10px;
}
#h1sec1 {
float: left;
width: 100%;
text-align: center;
}
#psec1 {
float: left;
width: 100%;
}
#sec2 {
float: left;
width: 270px;
height: 500px;
margin-left: 45px;
margin-right: 45px;
margin-top: 50px;
background-color: turquoise;
border-radius: 10px;
}
#h1sec2 {
float: left;
width: 100%;
text-align: center;
}
#psec2 {
float: left;
width: 100%;
}
<div id="wrapper">
<header></header>
<nav></nav>
<article>
<section id="sec1">
<h1 id="h1sec1">Section 1</h1>
<p id="psec1"></p>
</section>
<section id="sec2">
<h1 id="h1sec2">Section 2</h1>
<p id="psec2"></p>
</section>
<section id="sec1">
<h1 id="h1sec1">Section 1</h1>
<p id="psec1"></p>
</section>
<section id="sec2">
<h1 id="h1sec2">Section 2</h1>
<p id="psec2"></p>
</section>
</article>
</div>
Related
I am a newbie in css and would like to create the following:
I therefore created the following code:
#outer{
height: 420px;
width: 550px;
background-color: green
}
#left_space{
float: left;
height: 100px;
width: 100px;
background-color: black;
}
#right_space{
float: right;
height: 50px;
width: 50px;
background-color: yellow;
}
<div id="outer">
<div id="left_space">
<div id="right_space">
</div>
</div>
</div>
This however gives me the following output:
Any feedback on what I should change?
I think you're looking for this:
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="outer">
<div id="left_space">
</div>
<div id="right_space">
</div>
</div>
</body>
</html>
CSS
#outer{
display: flex;
height: 420px;
width: 550px;
background-color: green
}
#left_space{
flex:1;
height: 100;
width: 100;
background-color: black;
margin: 10px 10px 300px 10px;
}
#right_space{
flex:1;
height: 100;
width: 100;
background-color: yellow;
margin: 10px 10px 300px 10px;
}
You can visit this link: http://flexboxfroggy.com/
to learn more about flexbox :)
https://jsfiddle.net/Liamm12/f69L8epL/1/
You can do that by using dispaly:flex in css
And if you want to make a spaces you can use margin
I'm seeing you have a border for the boxes in the screenshot above if you want to do that you need to use border: 1px solid #000; for each box
If you are looking to make the green background to be full page you can just change the width:100%; to 100% in #outer class
#outer{
height: 420px;
width: 550px;
background-color: green;
display: flex;
}
#left_space{
float: left;
height: 100px;
width: 100%;
background-color: black;
margin-left: 1%;
margin-top: 1%;
margin-right: 1%;
}
#right_space{
float: right;
height: 100px;
width: 100%;
border: 3px solid #000;
background-color: yellow;
margin-left: 1%;
margin-top: 1%;
margin-right: 1%;
}
<div id="outer">
<div id="left_space"></div>
<div id="right_space"></div>
</div>
I want to create container that has two elements with colors given in the picture. The two are different divs and must stay side by side. How do I do it?
Here is my code:
<html>
<head>
<title>Testing</title>
<style>
.container{
width: 50%;
height: 50%;
}
.sidenav{
width: 25%;
height: 100%;
background-color: black;
}
.bgrnd{
width: 75%;
height: 100%;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="sidenav">
</div>
<div class="bgrnd">
</div>
</div>
</body>
</html>
You didn't set a height on the body of the document so setting a percentage on the divs won't do anything until you do. You also needed to float the sidenav div.
.container {
width: 50%;
height: 50%;
}
.sidenav {
width: 25%;
height: 100%;
background-color: black;
float: left
}
.bgrnd {
width: 75%;
height: 100%;
background-color: blue;
float: left;
}
html,
body {
height: 100%;
}
<div class="container">
<div class="sidenav">
</div>
<div class="bgrnd">
</div>
</div>
Your code Updated!
body, html{
padding:0px;
margin:0px;
height:100%;
}
.container{
width: 50%;
height: 50%;
}
.sidenav{
width: 25%;
height: 100%;
background-color: black;
float: left;
}
.bgrnd{
width: 75%;
height: 100%;
background-color: blue;
float: left;
}
<div class="container">
<div class="sidenav"></div>
<div class="bgrnd"></div>
</div>
How about this:
<div class="container">
<div class="sidenav">
test
</div>
<div class="bgrnd">
test
</div>
</div>
CSS:
.container {
width: 50%;
height: 50%;
}
.sidenav {
width: 25%;
height: 100%;
background-color: black;
color: #fff;
float: left;
}
.bgrnd {
width: 75%;
height: 100%;
background-color: blue;
color: #fff;
float: right;
}
You can set .sidenav and .bgrnd to position: absolute; and position them accordingly from there. Also, you've set .container to: width: 50%; and height: 50%; which I presume you don't want.
.container {
height: 100%;
width: 100%;
}
.sidenav {
width: 25%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: black;
}
.bgrnd {
width: 75%;
height: 100%;
position: absolute;
top: 0;
left: 25%;
background-color: blue;
}
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
</head>
<body>
<div class="container">
<div class="sidenav"></div>
<div class="bgrnd"></div>
</div>
</body>
</html>
How about using css-flex.
#main {
width: 100%;
border: 1px solid #c3c3c3;
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
}
.div1 {
width: 25%;
height: 50px;
}
.div2 {
width: 75%;
height: 50px;
}
<div id="main">
<div class="div1" style="background-color:coral;">A</div>
<div class="div2" style="background-color:lightblue;">B</div>
</div>
How to make the inside divs fit to the contents in the below html
I tried with display:inline-block but it moves the 2nd div to the bottom.
<div class="ms-table">
<div class="tableCol-75">
</div>
<div class="tableCol-25">
</div>
</div>
There you go:
.ms-table {
width: 80%;
}
.tableCol-70 {
float: left;
width: 70%;
border: 1px solid black;
margin-right: 10px;
}
.tableCol-25 {
float: left;
width: 25%;
border: 1px solid blue;
}
<div class="ms-table">
<div class="tableCol-70">
My name is abc and I live in ams.
</div>
<div class="tableCol-25">
I love junk food even though it is unhealthy
</div>
</div>
use display: table
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.ms-table{
display: table;
width: 100%;
height: 100px;
}
.table-cell{
display: table-cell;
vertical-align: top;
padding: 15px;
}
.tableCol-75{
width: 75%;
background: #ccc;
}
.tableCol-25{
width: 25%;
background: #000;
color: #fff;
}
<div class="ms-table">
<div class="table-cell tableCol-75">75%</div>
<div class="table-cell tableCol-25">25%</div>
</div>
use display: inline-block;
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.ms-table{
width: 100%;
min-height: 100px;
}
.table-cell{
display: inline-block;
vertical-align: top;
padding: 15px;
}
.tableCol-75{
width: 75%;
background: #ccc;
}
.tableCol-25{
width: 25%;
background: #000;
color: #fff;
}
<div class="ms-table">
<div class="table-cell tableCol-75">75%</div><!--
--><div class="table-cell tableCol-25">25%</div>
</div>
I have searched a lot for this, I can not find an answer.
I want the div SubTopicInfo1 to appear when hovering over the div subTopicNav1. I need it to be only CSS.
Here is what I have:
Fiddle
HTML:
<div id="NavBar">
<div id="Mainbutton">
<center><h2 style="margin-top: 7px;"> Main </h2></center>
</div>
<div id="topic1button">
<center><h2 style="margin-top: 7px;"> Skiing </h2></center>
</div>
<div id="topic2button">
<center><h2 style="margin-top: 12px;"> Movies </h2></center>
</div>
</div>
<div id="Main">
<div id="IntroImage">
</div>
<div id="Title">
<h2 id="Titlemain"> TYLER POTTS</h2>
</div>
<div id="SubTopicNav">
<div id="subTopicNav1">
<center><h2>About Me</h2></center>
</div>
<div id="subTopicNav2">
<center><h2>Skiing</h2></center>
</div>
<div id="subTopicNav3">
<center><h2>Movies</h2></center>
</div>
</div>
<div id="SubTopicInfo">
<div id="SubTopicInfo1">
<h1> Test </h1>
</div>
<div id="SubTopicInfo2">
</div>
<div id="SubTopicInfo3">
</div>
</div>
<div id="Footer">
</div>
</div>
CSS:
#NavBar
{
width: 750px;
height: 40px;
background-color: white;
margin: 0 auto;
border-top: 5px solid #FFD640;
border-bottom: 5px solid #FFD640;
}
#topic2button
{
width: 100px;
height: 45px;
margin-top:-50px;
margin-left: 215px;
float:left;
}
#topic2button:hover
{
background-color: #FFD640;
}
#Mainbutton
{
width: 100px;
height: 45px;
margin-top:;
margin-left: 315px;
float:left;
}
#Mainbutton:hover
{
background-color: #FFD640;
}
#topic1button
{
width: 100px;
height: 45px;
float: left;
}
#topic1button:hover
{
background-color: #FFD640;
}
#Main
{
width: 750px;
height: 1000px;
margin: 0 auto;
background-color: white;
}
#IntroImage
{
width: 750px;
height: 150px;
background-image:url("http://skiersedgeproshop.com/wp/wp-content/uploads/2013/11/snow-mountain-ski1.jpg")
}
#IntroImage:hover
{
opacity: 0.8;
}
#Title
{
width: 500px;
height: 40px;
border-top: 5px solid #FFD640;
border-bottom: 5px solid #FFD640;
margin:0 auto;
margin-top: 10px;
}
#Titlemain
{
margin-left: 170px;
margin-top: 6px;
}
#SubTopicNav
{
width: 150px;
height: 400px;
border-top: 5px solid #FFD640;
border-bottom: 5px solid #FFD640;
margin-top: 25px;
float:left;
}
#subTopicNav1
{
margin-top: 60px;
width: 150px;
height: 50px;
}
#subTopicNav2
{
margin-top: 60px;
width: 150px;
height: 50px;
}
#subTopicNav3
{
margin-top: 60px;
width: 150px;
height: 50px;
}
#subTopicNav1:hover
{
margin-top: 60px;
width: 150px;
height: 50px;
background-color: #FFD640;
}
#subTopicNav2:hover
{
margin-top: 60px;
width: 150px;
height: 50px;
background-color: #FFD640;
}
#subTopicNav3:hover
{
margin-top: 60px;
width: 150px;
height: 50px;
background-color: #FFD640;
}
#SubTopicInfo
{
width: 600px;
height: 400px;
border-top: 5px solid #FFD640;
border-bottom: 5px solid #FFD640;
margin-top: 25px;
float: left;
}
#SubTopicInfo1
{
display:none;
background-color: #FFD640;
}
#subTopicNav1:hover + #SubTopicInfo1
{
display: block;
}
Thanks.
You wont be able to do so with just CSS in your situation.
#subTopicNav1:hover + #SubTopicInfo1 {}
Works if #SubTopicInfi1 is next to (after #subTopicInfo1 closing tag) the container.
explained here:
How to affect other elements when a div is hovered
So you probably should look into a solution with Jquery/javascript!
Please try something like this:
(Hide the extra info panel by default, then make it visible on :hover like below)
<style>
.link {
display: block;
}
.link:hover p{
visibility: visible;
}
.info{
visibility: hidden;
}
</style>
<body>
<div class="link">
Text Here
<p class="info"> Info Here</p>
</div>
</body>
Here is the working Demo http://jsfiddle.net/H9fGP/1/
maybe its not the exact example. but I hope it helps :)
the main thing is that the sub info has absolute position
I rearanged the html and added some css.
.container
{
border-top: 5px solid #FFD640;
margin-top: 25px;
}
#SubTopicNav
{
position:relative;
}
#SubTopicNav > div > div
{
position:absolute;
left:200px;
top:0px;
display:none;
width: 600px;
height: 400px;
margin-top: 25px;
float: left;
}
#SubTopicInfo
{
display:none;
background-color: #FFD640;
}
#SubTopicNav > div:hover >div
{
display: block;
}
To make the issue easier to analyze I have created this jsFiddle:
Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {margin:0; }
#mainContainer { position: absolute; right: 4%; left: 4%; height: 100%; }
#headerContainer { width: 100%; z-index: 10; position: absolute; background: #323232; color: white; height: 30px; }
#middleContainer { height: 100%; }
#leftSection { position: absolute; float: left; width: 175px; background: #71ABD1; height: 100%; overflow: auto; color: black; padding-top: 30px; }
#middleSection { position: absolute; height: 100%; background-color: yellow; left: 175px; right: 175px; color: black; padding-top: 30px; }
#rightSection { float: right; height: 100%; width: 175px; border-left: 1px dotted black; background: red; color: black; padding-top: 30px; }
#footerContainer { position: absolute; bottom: 0; width: 100%; height: 30px; background: #323232; color: white; }
</style>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
leftSection
</div>
<div id="middleSection">
middleSection
</div>
<div id="rightSection">
rightSection
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
</body>
</html>
With the markup of top, middle, and bottom sections, problem is:
1- As you can see the footer colored in black is not really on the bottom of the page despite having position:absolute and bottom:0px on the footer div
2- More importantly, leftSection, middleSection and rightSection DIVs overlap with the header and footer DIVs, in fact, in this fiddle the only way to see the text displayed of the 3 middle sections is to have padding placed to avoid having it displayed underneath the header DIV.
I have tried placing top and bottom values of 30px on middleContainer to fix the overlap issue but this does not solve the problem, all I want is to keep headerContainer on top and footerContainer on the bottom while all the 3 middle sections adjust to 100% height. leftSection and rightSection have fixed width, but middleSection has flexible width and height.
http://jsfiddle.net/grc4/XTQuT/2/ does what I wanted exactly without specifying solid height values.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {
margin: 0;
height:100%;
}
#mainContainer {
position: absolute;
right: 4%;
left: 4%;
height: 100%;
}
#headerContainer {
width: 100%;
position: relative;
background: #323232;
color: white;
height: 30px;
}
#middleContainer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 30px 0;
}
#leftSection {
float: left;
width: 175px;
background: #71ABD1;
height: 100%;
overflow: auto;
color: black;
}
#middleSection {
position: absolute;
background-color: yellow;
left: 175px;
right: 175px;
top: 0;
bottom: 0;
color: black;
}
#rightSection {
float: right;
height: 100%;
width: 175px;
border-left: 1px dotted black;
background: red;
color: black;
}
#footerContainer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: #323232;
color: white;
}
</style>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
<div style="margin-top: 30px;">leftSection</div>
</div>
<div id="middleSection">
<div style="margin-top: 30px;">middleSection</div>
</div>
<div id="rightSection">
<div style="margin-top: 30px;">rightSection</div>
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
</body>
</html>
The "padding-top: 30px;" on your 3 inner elements is making them 30px taller than the height of the actual body, creating your problem.
Remove the top padding from those 3 elements, then make your header and footer relatively positioned, rather than absolute, and you should be set.
Like this: http://jsfiddle.net/BPJxD/28/
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {margin:0; }
#mainContainer { position: absolute; right: 4%; left: 4%; height: 100%; }
#headerContainer { width: 100%; z-index: 10; position: relative; background: #323232; color: white; height: 30px; }
#middleContainer { height: 100%; }
#leftSection { position: absolute; float: left; width: 175px; background: #71ABD1; height: 100%; overflow: auto; color: black; }
#middleSection { position: absolute; height: 100%; background-color: yellow; left: 175px; right: 175px; color: black; }
#rightSection { float: right; height: 100%; width: 175px; border-left: 1px dotted black; background: red; color: black; }
#footerContainer { position: relative; width: 100%; height: 30px; background: #323232; color: white; }
</style>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
leftSection
</div>
<div id="middleSection">
middleSection
</div>
<div id="rightSection">
rightSection
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
</body>
</html>
Your problem was that you were using needless absolute positioning in headercontainer and footercontainer, solution
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
leftSection
</div>
<div id="middleSection">
middleSection
</div>
<div id="rightSection">
rightSection
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
</body>
</html>
CSS:
body { margin:0; }
#mainContainer
{
position: absolute;
right: 4%; left: 4%;
height: 100%;
}
#headerContainer
{
width: 100%;
z-index: 10;
position: relative;
background: #323232;
color: white;
height: 30px;
}
#middleContainer { height: 100%; }
#leftSection
{
position: absolute;
float: left;
width: 175px;
background: #71ABD1;
height: 100%;
overflow: auto;
color: black;
padding-top: 30px;
}
#middleSection
{
position: absolute;
height: 100%;
background-color: yellow;
left: 175px;
right: 175px;
color: black;
padding-top: 30px;
}
#rightSection
{
float: right;
height: 100%;
width: 175px;
border-left: 1px dotted black;
background: red;
color: black;
padding-top: 30px;
}
#footerContainer
{
position: relative;
bottom: 0; width: 100%;
height: 30px;
background: #323232;
color: white;
}
Reviewing your whole Fiddle I noticed that you are using absolute positioning on every div. This is plane wrong.
You should only absolute positioning when:
You need a container that is free of the document's usual formatting. Such as a popup or a floating box.
You need to use a div inside a parent div with fixed positioning, but this will only work if parent positioning is set to relative.
You can remove all 3 of
padding-top: 30px;
like
#leftSection { position: absolute; float: left; width: 175px; background: #71ABD1; height: 100%; overflow: auto; color: black; }
#middleSection { position: absolute; height: 100%; background-color: yellow; left: 175px; right: 175px; color: black; }
#rightSection { float: right; height: 100%; width: 175px; border-left: 1px dotted black; background: red; color: black; }
and change your html like this
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
<div style="margin-top:30px;">leftSection</div>
</div>
<div id="middleSection">
<div style="margin-top:30px;">middleSection</div>
</div>
<div id="rightSection">
<div style="margin-top:30px;">rightSection</div>
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
I hope this can be helpful.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {margin:0; }
#mainContainer { position: relative; right: 4%; left: 4%; height: 100%; width:1000px; }
#headerContainer { width: 1000px; z-index: 10; position: absolute; background: #323232; color: white; height: 30px; }
#middleContainer { height: 100%; width:1000px; position:relative; display: table-cell;}
#leftSection { float: left; width:25%; background: #71ABD1; overflow: auto; color: black; padding-top: 30px; height: 100%;}
#middleSection { float: left; height:100%; width:50%; background-color: yellow; color: black; padding-top: 30px; }
#rightSection { float:left; height:100%; width: 25%; background: red; color: black; padding-top: 30px; }
#footerContainer { bottom: 0; width:1000px; height: 30px; background: #323232; color: white; float:left;}
</style>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer"> headerContainer </div>
<div id="middleContainer" >
<div id="leftSection"> leftSection </div>
<div id="middleSection"> middleSection </div>
<div id="rightSection"> rightSection
rightSection rightSection rightSection rightSection rightSection rightSection rightSection </div>
</div>
<div id="footerContainer" > footerContainer </div>
</div>
</body>
</html>