3 replies [Last post]
pvelez
Offline
newbie
Last seen: 14 years 37 weeks ago
Timezone: GMT-3
Joined: 2006-01-05
Posts: 3
Points: 0

Great board. I am new to it and would appreciate some advice. I am working on a site and as you can see it is 3 columns and two top boxes, the layout is perfect for me. My trouble is that I am needing to divide the verticle columns to the outside of the website into several sections and just cannot seem to figure out how despite much research. See example of desired layout at ticketmaster.com........no affilliation whatsoever.

Can anyone help? Grealty appreciated

PV

CSS CODE

body
{
background-color: #090300;
}

#container
{
width: 780px;
margin: 10px auto;
background-color: #1E0E0C;
color: #333;
border: 1px solid gray;
line-height: 130%;
}

#top
{
background-image: url(images/top.jpg);
background-repeat: no-repeat;
height: 90px;
padding: .5em;
background-color: #000000;
border-bottom: 1px solid gray;
}

#top h1
{
padding: 0;
margin: 0;
}

#top2
{
padding: .5em;
background-color: #1E0E0C;
border-bottom: 1px solid gray;
}

#top2 h1
{
padding: 0;
margin: 0;
}

#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}

#rightnav
{
float: right;
width: 160px;
margin: 0;
padding: 1em;
}

#content
{
margin-left: 200px;
border-left: 1px solid gray;
margin-right: 200px;
border-right: 1px solid gray;

padding: 1em;
max-width: 36em;
}

#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #ffffff;
background-color: #1E0E0C;
border-top: 1px solid gray;
font-weight: normal;
font-size: 10px;
font-family: Verdana;
}

#leftnav p,#rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }

-------------------------------------------------------------------------------------
HTML/ASP.NET Code
<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<link href="rcc.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<div id="top">
&nbsp;</div>
<div id="top2">
<h1>
&nbsp;</h1>
</div>
<div id="leftnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="rightnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div id="footer" style="text-align: center">
&nbsp;About ReggaetonConcerts.com :: Our Policies :: Your Privacy Rights ::
Partner With Us :: Advertise :: Jobs :: Contact Us &nbsp; &nbsp;&nbsp;</div>
</div>

</form>
</body>
</html>

pvelez
Offline
newbie
Last seen: 14 years 37 weeks ago
Timezone: GMT-3
Joined: 2006-01-05
Posts: 3
Points: 0

3 Column Layout - Stumped

Anyone? If you know of a web reference that may be able to assist me with this I would appreciate it. I am sort of new to CSS.

Any help is appreciated.

Thanks!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 1 day ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

3 Column Layout - Stumped

Looking at ticketmaster, there isn't anything special you need to do in your side columns. CSS layouts scale, so put the content in your sidebars and style it appropriately. The only real gotchas to look out for are:

- clears in the central column clearing the floated sidebars. This is fixed by using overflow or floating the central column
- IE issues cause by elements not "having layout". This is solved by giving those elements layout - normally this means ensuring they have a height or a width other than auto.

You may find these references useful:
- lots of three column stuff, http://css-discuss.incutio.com/?page=ThreeColumnLayouts
- equal height, source ordered columns, http://positioniseverything.net/articles/onetruelayout/
- hasLayout, http://www.satzansatz.de/cssd/onhavinglayout.html

pvelez
Offline
newbie
Last seen: 14 years 37 weeks ago
Timezone: GMT-3
Joined: 2006-01-05
Posts: 3
Points: 0

3 Column Layout - Stumped

Thank you Chris. Great reference links. I should be ok now. Thanks a bunch.