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!

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

CSS centred 3-col page 3

Status
Not open for further replies.
Rules2liveby

Rules2liveby

MIS
Sep 11, 2002
49
GB
Hi,

I am new to css and I wanted to create the following:

Site 1000px wide, centred on page. 3 columns. Centre colum liquid, others fixed width.

Can do everything except get it centred on the page with 'white space' on either side.

I have tried using the

<div id="centrecolumn" align=centre> etc

along with

#centresolumn { width:1000px; margin-left:auto; margin-right:auto; }

which works for one div, but when I float the left menu and right menu divs left and righe respectively they go all the way to the edges.

What am I doing wrong?

I expect something like leftmenu width 200px, right menu width 200px would be for the sides with centrecolumn width as max 600, min 200 or something.

 
Sort by date Sort by votes
If your centre column is defined as 1000px in width, it cannot by definition be liquid.

But try something like floating your three columns to the left within the 1000 pixel centered column. Remember that IE does some strange things with padding, margins and borders, so always make sure the total width of the columns less than your container:
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>Link within link</title>
<style type="text/css">
div {
	margin: 0;
	padding:0;
}
#centrecolumn { width:1000px; margin-left:auto; margin-right:auto; }

}
#menu {
width: 200px;
float: left;
}
#content {
width: 570px;
float: left;
padding: 0px 10px;
border: solid black 1px;
}
#sidebar {
width: 190px;
float: left;
margin-left: 5px;
}</style>
</head>
<div id="centrecolumn">
<div id ="menu">
menu stuff
</div>
<div id = "content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sollicitudin ultrices leo. Suspendisse urna dolor, lobortis vitae, fermentum sed, adipiscing nec, nisl. Fusce vitae elit nec ligula ullamcorper interdum. Nullam quis libero. Duis pretium vestibulum augue. Phasellus nibh. Aliquam erat volutpat. Sed orci tellus, mollis non, mattis non, rhoncus nec, mi. Morbi interdum nibh. Nam ut neque vel magna congue consequat. Aliquam erat volutpat.
</p>
<p>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam pharetra nisl nec augue. Aenean a nunc ac risus posuere accumsan. Nulla ac quam id velit egestas vehicula. Phasellus imperdiet, mi id venenatis cursus, justo purus ultrices augue, at condimentum ligula tellus at ipsum. Donec adipiscing erat eu tellus. Morbi sem ante, elementum placerat, commodo at, volutpat non, felis. Vestibulum vel erat eget elit imperdiet suscipit. Fusce interdum sapien sit amet magna. Vestibulum rutrum, erat nec malesuada mattis, odio dui faucibus augue, ac euismod mi lectus et felis. Mauris ornare dolor eu enim. Integer nibh leo, bibendum eu, porttitor vel, pellentesque quis, sapien. Fusce nec mi. Cras et leo eget sem iaculis molestie. Maecenas porttitor. Maecenas dui sapien, pulvinar a, viverra sit amet, vestibulum sit amet, nibh. Fusce fringilla lorem at nisl. Donec massa mi, aliquet et, posuere at, pellentesque ac, tortor. Curabitur eu lectus sed magna facilisis feugiat.
</p>
</div>
<div id="sidebar">
Sidebar data
</div>
</div>
</body>
</html>

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
Upvote 0 Downvote
Thanks greg,

That's most interesting. I did mean the whole width as 1000px so that's sorted it. I didn't know you could overlap <div>s so i've learnt something!

If I did want the total max-width to be 1000px, and the centre column (your 'content' div) to be liquid width, how would I do that. I've tried putting maxwidth 1000px, but that didn't work!
 
Upvote 0 Downvote
If I did want the total max-width to be 1000px, and the centre column (your 'content' div) to be liquid width, how would I do that
Click to expand...

I'm assuming that you really mean min-width of 1000.
Ignoring IE6 (which doesn't really understand min- or max-), try applying a min-width to the middle (enclosed column) that is 400px (or whatever) less than the min-width of the holding div. Be sure to also apply a max-width to each. One difference is that the entire page will be filled until the width exceeds the max-width, when it will then be centered like the previous example.

I only have IE6 at work, so can't test this. You may wish to post questions like this on the HTML, XHTML & CSS (Cascading Style Sheets) forum rather than this one.


Check out Little Boxes for several different layout examples done with CSS. Some are floated, some are done with relative or absolute positioning.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

rpearson
  • Locked
  • Question
HTML\CSS - Horizontal Nav Bar Placement
Replies
1
Views
81
Mike Lewis
Mike Lewis
pdldavis
  • Locked
  • Article
Wmv Files on Web Page in Firefox - Refresh Page? 2
Replies
5
Views
104
spamjim
spamjim
neronikita
  • Locked
  • Question
General Question about Direction to take for new Web page
Replies
2
Views
106
neronikita
neronikita
Remou
  • Locked
  • Question
Add pages to google search 1
Replies
3
Views
116
ChrisHirst
ChrisHirst
swhitty
  • Locked
  • Question
@font-face CSS help!
Replies
3
Views
76
ChrisHunt
ChrisHunt

Part and Inventory Search

Sponsor

Back
Top