Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Layout

Status
Not open for further replies.

amiw

Programmer
Joined
Apr 1, 2003
Messages
113
Location
GB
I'd appreciate any help on how to create a page layout using CSS that looked like this image
The div's should be about 35% each with a gap between.

thanks.
 
Code:
<div style="width: 55%; margin: 50px auto;">
 <div style="width: 48%; float: left; border: 1px solid #005; height: 200px; margin-bottom: 30px;"></div>
 <div style="width: 48%; float: right; border: 1px solid #005; height: 200px; margin-bottom: 30px;"></div>
 <div style="width: 48%; float: left; border: 1px solid #005; height: 200px; margin-bottom: 30px;"></div>
 <div style="width: 48%; float: right; border: 1px solid #005; height: 200px; margin-bottom: 30px;"></div>
</div>
Move stuff into separate stylesheet. Adjust colors and values accordingly.
 
Something like this?
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<title>Try this</title>
<style type="text/css">
   #container {
      width: 600px;
      margin: 0 auto;
      overflow: auto;
   }

   div.box {
      border: 1px solid black;
      height: 10em;
      width: 40%;
      margin: 10px 20px;
      float: left;
   }   
</style>
<head>
<body>
<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top