14 replies [Last post]
mbeausoleil
Offline
Regular
Last seen: 12 years 47 weeks ago
Timezone: GMT-5
Joined: 2007-09-27
Posts: 12
Points: 0

Hello ! i try to do a 3 columns layout like with a csszengarden html style.

Anyone know how to have the blue box in left, green in middle and red in right without using position absolute ?

title

div.container {
background-color: yellow;
padding: 5px;
}
div.text {
width: 500px;
background-color: green;
}
div.col1 { background-color: blue; }
div.col2 { background-color: red; }
div.col1,
div.col2 {
margin: 5px;
width: 100px;
}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc iaculis gravida ipsum. Proin dignissim semper ante. In pharetra. Ut viverra odio ac risus. Sed id nisl. Vestibulum risus metus, nonummy eget, suscipit id, faucibus vestibulum, quam. Quisque et justo ac ligula pharetra pretium. Integer tincidunt. Maecenas quam dolor, dictum eu, posuere nec, fringilla ac, justo. Praesent euismod, risus vitae egestas facilisis, felis mauris suscipit mi, eget tristique erat nisi sed quam. Phasellus dolor ante, rhoncus in, semper a, porttitor quis, tortor. Praesent dignissim imperdiet ante. Morbi sagittis malesuada sapien. Pellentesque condimentum, lorem at dignissim pharetra, arcu velit pulvinar elit, quis porta dui purus eget nisi.

Donec sit amet pede nec turpis rhoncus dictum. Mauris hendrerit augue eget justo. Nunc interdum hendrerit lectus. In hac habitasse platea dictumst. Mauris lobortis. In sapien metus, fermentum ut, semper nec, ultrices vitae, massa. Nullam consequat porttitor justo. Nulla ut ante. Donec vulputate pede. Proin iaculis nulla eget libero. Morbi felis. Sed lacus neque, dictum blandit, tincidunt lobortis, iaculis eget, pede.




1 A

1 B

1 C

2 A

2 B

2 C

2 D

Thanks !

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 days 21 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

HTML

Your HTML doesn't make much sense, you only appear to have two divs with content in, how can you have a three-column layout?

Verschwindende wrote:
  • CSS doesn't make pies

mbeausoleil
Offline
Regular
Last seen: 12 years 47 weeks ago
Timezone: GMT-5
Joined: 2007-09-27
Posts: 12
Points: 0

Like I said, it's a

Like I said, it's a ZenGarden html structure... you need to know that it's a generic html style, and the html was not necessary done for that specific design.

The designer gave me a new design and I need to apply that one without modifying the html.

And btw, "can't" is the kind of word I try to eliminate from vocabulary... Wink

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

1) Who said the word "can't"

1) Who said the word "can't" ?

2) It's impossible with the HTML you gave us.

3) Have you ever looked at the code on ZenGarden? They have stuffed tons of div tags into the html so that you CAN make it do whatever you want it to. The html you provided does not have enough structure to do this.

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 days 21 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

<div

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc iaculis gravida ipsum. Proin dignissim semper ante. In pharetra. Ut viverra odio ac risus. Sed id nisl. Vestibulum risus metus, nonummy eget, suscipit id, faucibus vestibulum, quam. Quisque et justo ac ligula pharetra pretium. Integer tincidunt. Maecenas quam dolor, dictum eu, posuere nec, fringilla ac, justo. Praesent euismod, risus vitae egestas facilisis, felis mauris suscipit mi, eget tristique erat nisi sed quam. Phasellus dolor ante, rhoncus in, semper a, porttitor quis, tortor. Praesent dignissim imperdiet ante. Morbi sagittis malesuada sapien. Pellentesque condimentum, lorem at dignissim pharetra, arcu velit pulvinar elit, quis porta dui purus eget nisi.

Donec sit amet pede nec turpis rhoncus dictum. Mauris hendrerit augue eget justo. Nunc interdum hendrerit lectus. In hac habitasse platea dictumst. Mauris lobortis. In sapien metus, fermentum ut, semper nec, ultrices vitae, massa. Nullam consequat porttitor justo. Nulla ut ante. Donec vulputate pede. Proin iaculis nulla eget libero. Morbi felis. Sed lacus neque, dictum blandit, tincidunt lobortis, iaculis eget, pede.




1 A

1 B

1 C

2 A

2 B

2 C

2 D

you only have two divs of content. How can you possibly make a three column layout?

You could always stick a massive right-border on the middle column to give it a three column effect but there is only two columns there.

Verschwindende wrote:
  • CSS doesn't make pies

lokiloks
lokiloks's picture
Offline
Enthusiast
Albuquerque, NM
Last seen: 11 years 31 weeks ago
Albuquerque, NM
Timezone: GMT-6
Joined: 2007-05-16
Posts: 145
Points: 24

I disagree you could easily

I disagree you could easily have three columns with this code:

* {
margin:0;
padding:0;
}
body {
text-align: center;
}
.container {
text-align: left;
width: 710px;
margin: 0 auto;
}
.text {
float: left;
width:230px;
.tools {
float: right;
width:470px;
}
.col1 {
float: left;
clear: left;
width: 230px;
}
.col2 {
float: right;
clear: right;
width: 230px;
}

Wouldn't that css give him three columns with 10px of space between each?
:\

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

Did you just make the code

You get three columns, but i don't know if this would be considered semantic. Seems like you would run into a lot of issues that would require absolute positioning.

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

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

You would have to change the

You would have to change the HTML to

1 A
2 B
1 C
2 C
1 A
2 B
1 C
2 D

for lokiloks code to work.

On a side note: 1000 POSTS!!!!!!

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 days 21 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

My mistake, I missed all

My mistake, I missed all those nested divs.

What's the point of them?

Verschwindende wrote:
  • CSS doesn't make pies

lokiloks
lokiloks's picture
Offline
Enthusiast
Albuquerque, NM
Last seen: 11 years 31 weeks ago
Albuquerque, NM
Timezone: GMT-6
Joined: 2007-05-16
Posts: 145
Points: 24

Deuce wrote:You would have

Deuce wrote:
You would have to change the HTML to ...
On a side note: 1000 POSTS!!!!!!

That's what the HTML was, I do beleive.

Congrats on the 1000 posts btw!

mbeausoleil
Offline
Regular
Last seen: 12 years 47 weeks ago
Timezone: GMT-5
Joined: 2007-09-27
Posts: 12
Points: 0

Yes I know, but the html is

Yes I know, but the html is done, and i just try to find new tricks with css... when i'll be completly obligate, i'll change the html layout..

For your information, i was able to do a 3 cols with that structure, but i was obligate to write a top: -300px (300px was the height of the text container) so.. that was not a good solution..

I'm sure it's possible to do, but I just don't know how for the moment.. i'll continu to search and your ideas are welcome...

Thanks for your time guys, that's really appreciate.

Mat

lokiloks
lokiloks's picture
Offline
Enthusiast
Albuquerque, NM
Last seen: 11 years 31 weeks ago
Albuquerque, NM
Timezone: GMT-6
Joined: 2007-05-16
Posts: 145
Points: 24

Didn't you read my reply? I

Didn't you read my reply? I gave you the css to make it work

LokiLoks

mbeausoleil
Offline
Regular
Last seen: 12 years 47 weeks ago
Timezone: GMT-5
Joined: 2007-09-27
Posts: 12
Points: 0

I've tried under firefox

doesn't really do what i need...

true i need tree cols, but 1a, 1b and 1c is supposed to be on the left side, before text container­...

and with that way, firefox don't clear correctly the 2a, 2b so.. that's not the solution... is my request...

thanks;)

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

If you want to lever the

If you want to lever the power and flexibility of CSS-P then you need to understand how to construct a suitable markup structure that can be manipulated. I think that with what you have it's nigh on impossible to get the arrangement you require, unless you were to position absolute which I wouldn't recommend.

You will probably need to think about reordering the markup or at least removing the 'tools' div.

A common technique is to have the center column wrapped in a div and to then employ float and negative margins to the outer and margins to the inner, the side columns placed after the wrapping div are then moved into position using neg margins.

It may help to understand the options if you had a look at the 'One true Layout' examples at positioniseverything.net

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

mbeausoleil
Offline
Regular
Last seen: 12 years 47 weeks ago
Timezone: GMT-5
Joined: 2007-09-27
Posts: 12
Points: 0

New development...

Thanks Hugo, i'll take a look to the example you gave me...

I had new result with the following CSS

div.container { background-color: yellow; float: left; width: 100%; } div.text { width: 300px; background-color: green; margin-left: 150px;

display: inline;
float: left;
}
div.tools {
float: left;
width: 220px;
margin-left: -100px;
}
div.tools div {
margin: 5px 0;
width: 100px;
}
div.tools div.col1 {
position: relative;
background-color: blue;
left: -320px;
float: left;
clear: left;
}
div.tools div.col2 {
background-color: red;
float: right;
clear: right;
}

Result in different browser:

IE6 & 7 = Exactly what I need
Firefox PC, Firefox Mac & Safari = Trouble with float-left clear-left

There screenshot of result.. If anybody have idea to fix the result, that will be really appreciate.

Result needed

Result to fix