My divs do not center properly in IE, it works fine in Firefox.
I've tried following this site: http://flumpcakes.co.uk/css/center-div-ie but the container div appears in the right hand side in IE.
<div id="topbar">
<div id="previous"> « {block:PreviousPage} {/block:PreviousPage} </div>
<div id="next"> {block:NextPage} {/block:NextPage} » </div>
</div>
<div id="container">
<div id="header">
<div id="logo">
Title here please
</div>
<div id="tagline">
So, why do arrays start from zero?
</div>
<div id="topmenu" class="toplinks">
Home Archive Ask Me Archive Random
</div>
<div id="search">
<form action="/search" method="get">
<input type="text" name="q" value="" id="" />
</form>
</div>
</div>
<div id="posts-container">
<div id="posts">
Lorem ipsum dolor sit amet, post content goes here
</div>
<div id="leftmenu">
<div id="date" >
23rd November 2010
</div>
<div id="posttitle">
This is a title and it contains all that you may need...
</div>
<i>- Filed under Misc -<i>
</div>
</div>
</div>
The css:
body
{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
font-family:Georgia,"Times New Roman",Serif;
font-size: 14px;
text-align:center;
}
#topbar
{
height: 25px;
background: #030303;
min-width: 900px;
width: 100%;
}
#container
{
width: 800px;
margin:0 auto;
text-align:center;
}
#header
{
height: 140px;
width: 800px;
}
#logo
{
font-size: 40px;
font-weight: bold;
margin-left: 0px;
margin-top: 45px;
position: absolute;
}
#tagline
{
font-size: 14px;
font-style: italic;
margin-top: 89px;
padding: 5px;
position: absolute;
}
#topmenu
{
margin-top: 45px;
position: absolute;
text-align: right;
margin-left: 500px;
}
#search
{
margin-top: 62px;
position: absolute;
text-align: right;
margin-left: 570px;
float: right;
}
#next
{
color: #ffffff;
text-align: right;
width: 350px;
padding:3px;
float: right;
}
#previous
{
color: #ffffff;
text-align: left;
width: 350px;
padding:3px;
float: left;
margin-left: 0px;
padding-left: 0px;
}
#posts-container
{
width: 800px;
text-align: center;
}
#posts
{
width: 613px;
margin-left:177px;
position: absolute;
padding-left: 3px;
text-align: left;
}
#leftmenu
{
width:175px;
text-align: right;
margin-left: 0px;
}
#posttitle
{
font-size: 18px;
font-weight: bold;
text-align: right;
padding: 3px;
margin-left: 5px;
}
#date
{
background: #d4ff40;
width: 165px;
height: 14px;
text-align: center;
padding: 4px;
color: #7c9c2d;
margin: 5 auto;
font-size: 11px;
}
just delete text-align:center; from body, #container and #posts-container
My divs do not center properly in IE, it works fine in Firefox
I'm not going to try to parse that HTML and CSS in my head (working links are appreciated) but odds are that you are in Quirks mode.
Add a Doctype that triggers standards mode.
Related
I'm new to HTML and CSS and have been following a course on them. One of the objectives was to try to make a rough basic copy of the visuals of any website we'd like in order to practice what we learned - so I picked the Gitlab front page.
Was progressing fine until I reached this 'Get Free Trial' div. My idea was to set the Get Free Trial div inside the outer div and center it. No matter what I do, however, there is always this margin/padding from the top that I can't get rid of and I have no idea why it is there.
#topbar {
height: 68px;
}
#adbar {
background-color: #9B51E0;
height: 60px;
}
#main {
background-color: white;
}
body {
margin: 0;
padding: 0;
}
#logo-div {
height: 68px;
width: 155px;
float: left;
}
#logo {
margin: 10px 20px 10px 20px;
width: 108px;
}
.menu-div {
width: 100px;
height: 68px;
float: left;
}
.menu-text {
text-align: center;
font-size: 90%;
font-weight: bold;
font-family: Arial;
color: #929292;
margin-top: 27px;
}
.menu-text:hover {
color: #9B51E0;
}
#search-div {
width: 530px;
float: left;
height: 68px;
}
#search {
float: right;
width: 13px;
margin-right: 25px;
margin-top: 25px;
}
#trial-div {
width: 140px;
background-color: burlywood;
float: left;
height: 68px;
}
#trial-button {
height: 70%;
width: 90%;
background-color: #FA7035;
color: white;
border-radius: 10%;
}
#trial-text {
text-align: center;
font-weight: bold;
font-size: 90%;
font-family: Arial;
margin-top: 10px;
margin-bottom: 25px;
}
<div id="topbar">
<div id="logo-div">
<img src="logo2.PNG" id="logo">
</div>
<div class="menu-div">
<p class="menu-text">Product</p>
</div>
<div class="menu-div">
<p class="menu-text">Solutions</p>
</div>
<div class="menu-div">
<p class="menu-text">Resources</p>
</div>
<div class="menu-div">
<p class="menu-text">Partners</p>
</div>
<div class="menu-div">
<p class="menu-text">Pricing</p>
</div>
<div class="menu-div">
<p class="menu-text">Support</p>
</div>
<div id="search-div">
<img src="search.png" id="search">
</div>
<div id="trial-div">
<div id="trial-button">
<p id="trial-text">Get free trial</p>
</div>
</div>
</div>
<div id="adbar">
</div>
<div id="main">
</div>
Any ideas and could I ask for an explanation of why this happens? Thank you!
If your final goal is to center the inner div (get free trial) inside outer div:
<div id="trial-div" style="display:flex;justify-content:center;align-items:center;">
#topbar {
height: 68px;
}
#adbar {
background-color: #9B51E0;
height: 60px;
}
#main {
background-color: white;
}
body {
margin: 0;
padding: 0;
}
#logo-div {
height: 68px;
width: 155px;
float: left;
}
#logo {
margin: 10px 20px 10px 20px;
width: 108px;
}
.menu-div {
width: 100px;
height: 68px;
float: left;
}
.menu-text {
text-align: center;
font-size: 90%;
font-weight: bold;
font-family: Arial;
color: #929292;
margin-top: 27px;
}
.menu-text:hover {
color: #9B51E0;
}
#search-div {
width: 530px;
float: left;
height: 68px;
}
#search {
float: right;
width: 13px;
margin-right: 25px;
margin-top: 25px;
}
#trial-div {
width: 140px;
background-color: burlywood;
float: left;
height: 68px;
}
#trial-button {
height: 70%;
width: 90%;
background-color: #FA7035;
color: white;
border-radius: 10%;
}
#trial-text {
text-align: center;
font-weight: bold;
font-size: 90%;
font-family: Arial;
margin-top: 10px;
margin-bottom: 25px;
}
<div id="topbar">
<div id="logo-div">
<img src="logo2.PNG" id="logo">
</div>
<div class="menu-div">
<p class="menu-text">Product</p>
</div>
<div class="menu-div">
<p class="menu-text">Solutions</p>
</div>
<div class="menu-div">
<p class="menu-text">Resources</p>
</div>
<div class="menu-div">
<p class="menu-text">Partners</p>
</div>
<div class="menu-div">
<p class="menu-text">Pricing</p>
</div>
<div class="menu-div">
<p class="menu-text">Support</p>
</div>
<div id="search-div">
<img src="search.png" id="search">
</div>
<div id="trial-div" style="display:flex;justify-content:center;align-items:center;">
<div id="trial-button">
<p id="trial-text">Get free trial</p>
</div>
</div>
</div>
<div id="adbar">
</div>
<div id="main">
</div>
Without being able to see everything, did you reset the styles from the browser? Each browser comes with a built in style sheet that has padding and margins. I recommend loading a reset.css stylesheet BEFORE your actual stylesheet. This will clear all browser styles. Make sure yours is second otherwise the reset will override yours.
Here is the reset styles I use:
https://meyerweb.com/eric/tools/css/reset/
I figured it out, it was the CSS code in my trial-text id. Putting margins there sets a margin in relation to the trial-div div and not the trial-button div. This forces the trial-button div to also apply a margin.
Not sure why exactly this happens and it doesnt apply a margin to the trial-button div though
I would like to put 2 buttons div (register and login) on my banner and center. However I think that I already have a problem with my blocks on my html ??
Here is an overview of my website in below.
screenshot:
My first problem is that I don't can to use the margin-left or margin-right to move my button "register" or "login" for center.
My problem comes perhaps from code HTML, Is it a problem with my blocks ?
Here is my code HTML
<div class="my-banner">
<img class="banner" src="images/slider.jpg"/>
<div class="transparent"></div>
<img class="picture-logo" src="images/logo.png"/>
<div class="container">
<div class="myButtonRegister">REGISTER</div>
<div class="myButtonLogin">LOGIN</div>
<div class="topnav">
<a class="active" href="index.php">HOME</a>
ABOUT US
INVESTEMENT PLAN
NEWS
FAQS
RULES
CONTACT US
</div>
</div>
</div>
Here is my code CSS
.myButtonRegister{
margin-top: 342px;
float: left;
background-color: #C22312;
color: white;
height: 48px;
width: 168px;
text-align: center;
color: white;
font-family: 'Pridi', serif;
font-size: 26px;
padding-top: 10px;
word-spacing: 0px;
}
.myButtonRegister a {
color: #f2f2f2;
text-decoration: none;
}
.myButtonLogin{
margin-top: 342px;
float: left;
background-color: black;
color: white;
height: 48px;
width: 168px;
text-align: center;
color: white;
font-family: 'Pridi', serif;
font-size: 26px;
padding-top: 10px;
word-spacing: 0px;
}
Do you have an idea plase ?
Just add a father box to your buttons and use flex to align your buttons. Here is an example:
.container {
height: 200px;
width: 100%;
background: #eee;
}
.container .subcontainer {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
<div class="container">
<div class="subcontainer">
<button>Login</button>
<button>Register</button>
</div>
<!--NAV-->
</div>
Try following code for good design and set maximum height & width image in banner no issues create for this type of design this is the right way.
.myButtonRegister{
float: left;
background-color: #C22312;
color: white;
height: 48px;
width: 168px;
text-align: center;
color: white;
font-family: 'Pridi', serif;
font-size: 26px;
padding-top: 10px;
word-spacing: 0px;
}
.myButtonRegister a {
color: #f2f2f2;
text-decoration: none;
}
.myButtonLogin{
float: left;
background-color: black;
color: white;
height: 48px;
width: 168px;
text-align: center;
color: white;
font-family: 'Pridi', serif;
font-size: 26px;
padding-top: 10px;
word-spacing: 0px;
}
.button-action {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
<div class="my-banner">
<div class="banner-image">
<img class="banner" src="images/slider.jpg"/>
<div class="button-action">
<div class="myButtonRegister">REGISTER</div>
<div class="myButtonLogin">LOGIN</div>
</div>
</div>
<div class="transparent"></div>
<img class="picture-logo" src="images/logo.png"/>
<div class="container">
<div class="topnav">
<a class="active" href="index.php">HOME</a>
ABOUT US
INVESTEMENT PLAN
NEWS
FAQS
RULES
CONTACT US
</div>
</div>
</div>
Using position:absolute remove margin-top and give parent div to height and position:relative
.my-banner{
position:relative;
height: 450px;
}
.btnBox{
position: absolute;
left: 0px;
right: 0px;
top: 0px;
margin: auto;
bottom: 0px;
height: 85px;
width: 336px;
}
.myButtonRegister{
float: left;
background-color: #C22312;
color: white;
height: 48px;
width: 168px;
text-align: center;
color: white;
font-family: 'Pridi', serif;
font-size: 26px;
padding-top: 10px;
word-spacing: 0px;
}
.myButtonRegister a {
color: #f2f2f2;
text-decoration: none;
}
.myButtonLogin{
float: left;
background-color: black;
color: white;
height: 48px;
width: 168px;
text-align: center;
color: white;
font-family: 'Pridi', serif;
font-size: 26px;
padding-top: 10px;
word-spacing: 0px;
}
<div class="my-banner">
<img class="banner" src="images/slider.jpg"/>
<div class="transparent"></div>
<img class="picture-logo" src="images/logo.png"/>
<div class="container">
<div class="btnBox">
<div class="myButtonRegister">REGISTER</div>
<div class="myButtonLogin">LOGIN</div>
</div>
<div class="topnav">
<a class="active" href="index.php">HOME</a>
ABOUT US
INVESTEMENT PLAN
NEWS
FAQS
RULES
CONTACT US
</div>
</div>
</div>
The result should be looking like this, as it appears in Edge:
This is how it looks when rendered in Chrome; as you may notice the search box is misplaced, on the line below the category bar:
The raw code:
Please help me to find the error that makes the search box appear on the lower line. I have been through this from start to finish for hours, and can't figure out why the same code looks fine in Edge, but not in Chrome.
I won't switch browsers, I need a solution for this to keep operating with
Chrome.
#topbar {
width: 1000px;
margin: 0 auto;
height: 40px;
}
body {
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
}
#logo {
margin-top: 8px;
width: 100px;
float: left;
margin-right: 8px;
}
.topbar-section {
float: left;
border-left: 1px #CCCCCC solid;
height: 100%;
}
#signin-image {
width: 25px;
margin: 11px 15px;
float: left;
}
#signin-text {
font-weight: bold;
font-size: 90%;
position: relative;
top: 14px;
padding-right: 50px;
}
#wigglyline {
float: left;
height: 40px;
}
#bell {
height: 25px;
margin: 9px 8px;
}
#bell-div {
float: left;
}
.topbar-menu {
font-weight: bold;
font-size: 90%;
padding: 13px 15px 0 15px;
height: 27px;
}
#more-arrow {
width: 16px;
margin-left: 20px;
}
#search-box {
background-color: #E4E4E4;
border: none;
font-weight: bold;
font-size: 14px;
padding: 5px;
margin: 5px 0 5px 5px;
float: left;
}
#magnifying-glass {
height: 26px;
margin-top: 5px;
}
.clear {
clear: both;
}
#menu-bar-container {
background-color: #BB1919;
width: 100%;
height: 100px;
}
#menu-bar {
width: 1000px;
margin: 0 auto;
}
h1 {
padding: 0;
margin: 0;
color: white;
font-size: 40px;
font-weight: normal;
padding-top: 10px;
}
<div id="topbar">
<img id="logo" src="images/bbc-blocks-dark.png">
<div id="signin-div" class="topbar-section">
<img id="signin-image" src="images/signinimage.png">
<span id="signin-text">Sign in</span>
</div>
<div id="bell-div">
<img id="wigglyline" src="images/wigglyline.png">
<img id="bell" src="images/bell.png">
</div>
<div class="topbar-section topbar-menu">
News
</div>
<div class="topbar-section topbar-menu">
Sport
</div>
<div class="topbar-section topbar-menu">
Weather
</div>
<div class="topbar-section topbar-menu">
iPlayer
</div>
<div class="topbar-section topbar-menu">
TV
</div>
<div class="topbar-section topbar-menu">
More
<img id="more-arrow" src="images/more-arrow.png">
</div>
<div class="topbar-section">
<input id="search-box" type="text" value="Search">
<input type="image" id="magnifying-glass" src="images/magnifying-glass.png">
</div>
</div>
<div class="clear"></div>
<div id="menu-bar-container">
<div id="menu-bar">
<h1>NEWS</h1>
</div>
</div>
It's because the width of your container isn't big enough. If you make the width of #topbar 1100px then it won't wrap.
#topbar {
width: 1100px;
margin: 0 auto;
height: 40px;
}
body {
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
}
#logo {
margin-top: 8px;
width: 100px;
float: left;
margin-right: 8px;
}
.topbar-section {
float: left;
border-left: 1px #CCCCCC solid;
height: 100%;
}
#signin-image {
width: 25px;
margin: 11px 15px;
float: left;
}
#signin-text {
font-weight: bold;
font-size: 90%;
position: relative;
top: 14px;
padding-right: 50px;
}
#wigglyline {
float: left;
height: 40px;
}
#bell {
height: 25px;
margin: 9px 8px;
}
#bell-div {
float: left;
}
.topbar-menu {
font-weight: bold;
font-size: 90%;
padding: 13px 15px 0 15px;
height: 27px;
}
#more-arrow {
width: 16px;
margin-left: 20px;
}
#search-box {
background-color: #E4E4E4;
border: none;
font-weight: bold;
font-size: 14px;
padding: 5px;
margin: 5px 0 5px 5px;
float: left;
}
#magnifying-glass {
height: 26px;
margin-top: 5px;
}
.clear {
clear: both;
}
#menu-bar-container {
background-color: #BB1919;
width: 100%;
height: 100px;
}
#menu-bar {
width: 1000px;
margin: 0 auto;
}
h1 {
padding: 0;
margin: 0;
color: white;
font-size: 40px;
font-weight: normal;
padding-top: 10px;
}
<div id="topbar">
<img id="logo" src="images/bbc-blocks-dark.png">
<div id="signin-div" class="topbar-section">
<img id="signin-image" src="images/signinimage.png">
<span id="signin-text">Sign in</span>
</div>
<div id="bell-div">
<img id="wigglyline" src="images/wigglyline.png">
<img id="bell" src="images/bell.png">
</div>
<div class="topbar-section topbar-menu">
News
</div>
<div class="topbar-section topbar-menu">
Sport
</div>
<div class="topbar-section topbar-menu">
Weather
</div>
<div class="topbar-section topbar-menu">
iPlayer
</div>
<div class="topbar-section topbar-menu">
TV
</div>
<div class="topbar-section topbar-menu">
More
<img id="more-arrow" src="images/more-arrow.png">
</div>
<div class="topbar-section">
<input id="search-box" type="text" value="Search">
<input type="image" id="magnifying-glass" src="images/magnifying-glass.png">
</div>
</div>
<div class="clear"></div>
<div id="menu-bar-container">
<div id="menu-bar">
<h1>NEWS</h1>
</div>
</div>
It's because you've set the width property of the ID top-bar to 1000. Search bar cannot fit in (At least in chrome, maybe because of default browser margins)
Make the width property to something like 1050px to solve it.
#topbar {
width: 1050px;
margin: 0 auto;
height: 40px;
}
It works!
I am trying to replicate the BBC News site and I have this weird styling problem.
Here is the image.
I always get this gap in between two of my divs.
Here is the code I used. Not sure how I am supposed to go about getting rid of that space. tried setting margin and padding to 0 but that didn't work.
Here is the code:
body{
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
}
#topbar{
height: 40px;
width: 1000px;
margin: 0 auto;
background-color: #FFFFFF;
}
#logo{
float: left;
margin-top: 8px;
margin-right: 8px;
}
.topbarsections{
float:left;
border-left: 1px #CCCCCC solid;
height: 100%;
}
#signin-image{
float: left;
width: 30px;
margin-top: 7px;
margin-left: 8px;
}
#signin-text{
float: left;
font-weight: bold;
font-size: 90%;
color: #333333;
position: relative;
top: 13px;
padding-right: 80px;
}
.topbar-menu{
float: left;
font-weight: bold;
color: #333333;
font-size: 90%;
padding: 13px 15px 0 15px;
height: 27px;
}
#more-arrow{
height: 13px;
margin-left: 15px;
}
#search-box{
background-color: #E4E4E4;
margin: 8px 0 0 10px;
border: none;
font-weight: bold;
font-size: 14px;
padding: 5px;
width: 140px;
float: left
}
#magnifying-glass{
margin-top: 8px;
height: 26px;
}
.clear{
margin: 0;
padding: 0;
}
#news-bar{
background-color: #BB1919;
width: 100%;
height: 70px;
}
#inner-news-bar{
background-color: #BB1919;
margin: 0 auto;
width: 1200px;
height: 70px;
}
#news-bar h1{
color: white;
margin: 0;
padding: 10px;
font-weight: normal;
font-size: 45px;
}
#menu-bar{
background-color: #A91717;
width: 100%;
height: 35px;
}
#inner-menu-bar{
background-color: #A91717;
width: 1200px;
height: 35px;
margin: 0 auto;
}
.menu-bar-sections{
float: left;
border-right: 1px solid #BB4545;
padding-left: 10px;
padding-right:8px;
position: relative;
top: -5px;
}
.menu-bar-sections a{
float:left;
color: white;
text-decoration: none;
}
.menu-bar-sections a:hover{
text-decoration: underline;
}
#menu-bar-more-section{
border-right: none !important;
}
#down-arrow{
float: left;
height: 13px;
position: relative;
top: 2px;
margin-left: 2px;
}
#page-container{
width: 1200px;
margin: 0 auto;
}
h2{
}
<body>
<div id="topbar">
<img id="logo" src="images/bbclogo.png">
<div id="signin-div" class="topbarsections">
<img src="images/singin.PNG" id="signin-image">
<span id="signin-text">Sign in</span>
</div>
<div class="topbarsections topbar-menu">
News
</div>
<div class="topbarsections topbar-menu">
Sports
</div>
<div class="topbarsections topbar-menu">
Weather
</div>
<div class="topbarsections topbar-menu">
Shop
</div>
<div class="topbarsections topbar-menu">
Earth
</div>
<div class="topbarsections topbar-menu">
Travel
</div>
<div class="topbarsections topbar-menu">
More
<img id="more-arrow"src="images/more-arrow.PNG">
</div>
<div class="topbarsections">
<input id="search-box" type="text" placeholder="Search">
<input type="image" id="magnifying-glass" src="images/glass.PNG">
</div>
</div>
<div class="clear"></div>
<div id="news-bar">
<div id="inner-news-bar">
<h1>NEWS</h1>
</div>
</div>
<div class="clear"></div>
<div id="menu-bar">
<div id="inner-menu-bar">
<p class="menu-bar-sections">Home</p>
<p class="menu-bar-sections">Video</p>
<p class="menu-bar-sections">World</p>
<p class="menu-bar-sections">US & Canada</p>
<p class="menu-bar-sections">UK</p>
<p class="menu-bar-sections">Business</p>
<p class="menu-bar-sections">Tech</p>
<p class="menu-bar-sections">Science</p>
<p class="menu-bar-sections">Stories</p>
<p class="menu-bar-sections">Entertainment & Arts</p>
<p class="menu-bar-sections">Health</p>
<p class="menu-bar-sections" id="menu-bar-more-section">More<img src="images/down-arrow.PNG" id="down-arrow"></p>
</div>
</div>
<div class="clear"></div>
<div id="page-container">
<div id="main-article">
<h2>Technology</h2>
</div>
</div>
</body>
If by "gap" you mean the space above the heading "Technology", #Olivier Krull is right: that's the default margin of the h2 header.
You can simply add this CSS rule to set it to zero:
#main-article > h2:first-child {
margin-top: 0;
}
I face the problem that when I put float to my #middle-content. The float doesn't display. Moreover, this removes its background too. I want the middle-content to be at the right of #leftcontent. Help please!!
<body>
<div id="page">
<div id="banner">
<div id="cloud">
<img src="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/Cloud4.gif" width="573" height="121" /> </div>
<!--cloud-->
<div id="home">
<h2>HOME</h2>
</div>
<!--home-->
</div> <!--banner-->
<div id="maincontent">
<div id="leftcontent">
<div class="navigation">
Home
</div><!--navigation-->
<div class="navigation">
About Us
</div><!--navigation-->
<div class="navigation">
Products
</div><!--navigation-->
<div class="navigation">
Contact
</div><!--navigation-->
<div class="navigation">
ABOUT US
</div><!--navigation-->
</div> <!--leftcontent-->
<div id="middle-content">
<h1>Welcome To Bagger</h1>
</div> <!--middle-content-->
</div> <!--maincontent-->
</div> <!--page-->
</body>
And this is my CSS
#cloud {
float: left;
padding: 0px;
margin: 0px;
}
#page {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#home {
float: left;
padding-left: 59px;
padding-right: 59px;
text-align:center;
left: auto;
top: auto;
right: auto;
bottom: auto;
padding-top: 37px;
padding-bottom: 37px;
}
#banner {
background-color: #78c8f0;
height: 130px;
}
.navigation {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
text-decoration: none;
padding: 10px;
font-weight: bold;
text-align: center;
}
.navigation a {
text-decoration: none;
color: #000000;
background-position: center;
}
#maincontent {
background-color: #A6D2FF;
}
#leftcontent {
width: 150px;
display: table;
}
#middle-content {
width: 400px;
float: left;
}
You need to float the #leftcontent, and to fix the background, add a clear fix
#cloud {
float: left;
padding: 0px;
margin: 0px;
}
#page {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#home {
float: left;
padding-left: 59px;
padding-right: 59px;
text-align: center;
left: auto;
top: auto;
right: auto;
bottom: auto;
padding-top: 37px;
padding-bottom: 37px;
}
#banner {
background-color: #78c8f0;
height: 130px;
}
.navigation {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
text-decoration: none;
padding: 10px;
font-weight: bold;
text-align: center;
}
.navigation a {
text-decoration: none;
color: #000000;
background-position: center;
}
#maincontent {
background-color: #A6D2FF;
}
.clear:after {
content: '';
display: block;
clear: left;
height: 0;
}
#leftcontent {
width: 150px;
display: table;
float: left;
}
#middle-content {
padding-top: 1px;
width: 400px;
float: left;
}
<div id="page">
<div id="banner" class="clear">
<div id="cloud">
<img src="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/Cloud4.gif" width="573" height="121" />
</div>
<!--cloud-->
<div id="home">
<h2>HOME</h2>
</div>
<!--home-->
</div>
<!--banner-->
<div id="maincontent" class="clear">
<div id="leftcontent">
<div class="navigation">
Home
</div>
<!--navigation-->
<div class="navigation">
About Us
</div>
<!--navigation-->
<div class="navigation">
Products
</div>
<!--navigation-->
<div class="navigation">
Contact
</div>
<!--navigation-->
<div class="navigation">
ABOUT US
</div>
<!--navigation-->
</div>
<!--leftcontent-->
<div id="middle-content">
<h1>Welcome To Bagger</h1>
</div>
<!--middle-content-->
</div>
<!--maincontent-->
</div>
<!--page-->
I have also added 1px top padding to middle-content to stop the h2 margin causing a gap above maincontent
Update
Sounds like your dreamweaver does not support pseudo elements, see if this fixes your clear problem:
change css .clear:after to:
.clear {
display:block;
height:0;
overflow:hidden;
clear:both;
}
and then in the html above, find the divs with the clear class and remove the class, then at the end of those divs, add a physical div to see if it fixes your problem:
<div class="clear"></div>
try this
#leftcontent {
width: 150px;
float:left;
}
#middle-content {
width: 400px;
float: left;
}
also I have added
#maincontent:before,
#maincontent:after{
clear:both;
display:table;
content:"";
}
to fix the background color
working code is here
For your problems, i have the following solutions:
#maincontent can't show its background because its height is 0. You can fix it :
#maincontent {
background-color: #A6D2FF;
height:250px;
}
#leftcontent must have float:left so the middle-content to be at the right of #leftcontent
#leftcontent {
width: 150px;
display: table;
float: left;
}