2 replies [Last post]
p3aul
Offline
Regular
Last seen: 9 years 21 weeks ago
Timezone: GMT-4
Joined: 2008-10-19
Posts: 17
Points: 19

I have the banner centered in a div where I used margin-left and margin right "auto". The problem is when I try to put these two div(reserved for text) directly below the banner. The first div(left) gets put below the banner and the second div, instead of being beside the left one is below it, although on the right as it should be. I've googled but I can't seem to find my situation anywhere. The code is below. Could someone help please?
Thanks,
Paul

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>test</title>
  <style>
div.banner{
width: 999px ;
height: 397px;
margin-left: auto ;
margin-right: auto ;
}
div.left-col{
margin-right: auto;
width: 50%;
height: 600px;
}
div.right-col{
margin-left: auto;
width: 50%;
height: 600px;
  </style>
</head>
<body>
<div class="banner">
<img style="width: 100%; height: 100%;" alt=""
 src="file:///C:/AA-Website%20Templates/Homebrew/images/header.jpg"></div>
<div class="left-col">
</div>
<div class="right-col">
</div>
<br>
</body>
</html>

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 32 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You'll need to float those

You'll need to float those flanking elements and move banner to last in the flow so your floated elements are first. You may run into issues mixing fixed and fluid widths though.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

p3aul
Offline
Regular
Last seen: 9 years 21 weeks ago
Timezone: GMT-4
Joined: 2008-10-19
Posts: 17
Points: 19

Thanks! All I had to do was

Thanks! All I had to do was replace margin left and right with float: left and float: right and it worked. No issues though.
Paul