9 replies [Last post]
Thir13teen
Offline
newbie
Last seen: 14 years 40 weeks ago
Joined: 2007-03-28
Posts: 4
Points: 0

Sorry to bother you but I've been googling (and searching this forum) for days about this very easy layout and I haven't been able to get a good answer.

I want to make a layout that is centered and has 3 columns (or 5 with whitespace), one big in the middle and 2 small on its sides, say 10px, 450px, 10px, and then I want empty whitespace on the sides.

I've just found lots of tutorials on 3-columned layouts but without the whitespace.

I don't know anything except that I should use divs, so please help me as much as you can with both the html- and css-code. Big thanks in advance!

AttachmentSize
visa.jpg5.37 KB
Thir13teen
Offline
newbie
Last seen: 14 years 40 weeks ago
Joined: 2007-03-28
Posts: 4
Points: 0

The pic shows better how I

The pic shows better how I mean for it to look, nvm the filename, it's "show" in Swedish Tongue

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 27 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

http://www.thenoodleincident.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

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

Then try taking one of

Then try taking one of those three column layouts you have looked at and further divide the two outer columns into two, floating the two halves left and right?

Hugo.

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

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Thir13teen wrote:I want to

Thir13teen wrote:
I want to make a layout that is centered and has 3 columns (or 5 with whitespace), one big in the middle and 2 small on its sides, say 10px, 450px, 10px, and then I want empty whitespace on the sides.

What are the 10px bits for? a fancy border? In which case you simply need a one column design. If that IS what you want, I'll post some sample code for you, if you want. Let me know.

CT

Thir13teen
Offline
newbie
Last seen: 14 years 40 weeks ago
Joined: 2007-03-28
Posts: 4
Points: 0

Yea if it is possible I'm

Yea if it is possible I'm interested. I finally had it work and I thought I'd post my code if anyone may be interested in the future.

body {
text-align: center;
margin: 0px;
background-color: #F2F2F2;

height: 100%;
}

#frame {
width: 528px;
height: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
padding: 0px;
text-align: left;
}

#dsleft {
background-image: url('leftdshadow.jpg');
background-repeat: repeat-y;
width: 14px;
height: 100%;
padding: 0px;
float: left;
}

#contentcenter {
width: 500px;
padding: 0px;
float: left;
background: #FFFFFF;
height: 100%;
}

#dsright {
background-image: url('rightdshadow.jpg');
background-repeat: repeat-y;
width: 14px;
height: 100%;
padding: 0px;
float: left;
}

But is there a better way of doing it, CT?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Compared to what you have,

Compared to what you have, yes, there is a better way of doing it.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

If you post a live url of

If you post a live url of what you have, or your full html and css here inside code tags, along with the critical images as attachments, I'll show you how.

SuperRoach
SuperRoach's picture
Offline
Enthusiast
Ballarat
Last seen: 10 years 20 weeks ago
Ballarat
Timezone: GMT+10
Joined: 2007-02-26
Posts: 291
Points: 6

just thinking about

just thinking about whitespace, couldn't you just use a extra div, and have a padding in it?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 46 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

To do that violates the

To do that violates the principle of separation of structure and presentation. You use padding to create space within an element, and margin to create space without.

Too, the specs say that an empty <p> should be ignored, and strongly suggests that other empty block elements be ignored. You are not guaranteed the dummy div will work in the future.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.