9 replies [Last post]
acoustika
Offline
newbie
Last seen: 10 years 48 weeks ago
Joined: 2006-12-01
Posts: 10
Points: 0

Hey there...
Been searching but cant seem to find the answer though I think it's pretty simple but here goes...

How do I make a layout with 3 divs next to eachother...
with the left and right ones floating to left and right... wele tha's easy but then how does I make the middle one expand out to these other divs??
Still so they all are next to one another...
it's for making a rounded corner thing....

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 38 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Float left left and float

Float left left and float right right - both come before the middle column in the source. Then just give the middle column margins left and right equal to the width of the floated columns.
Although I think this method may be a bit suspect as a way of doing rounded corners.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Triumph (not verified)
Anonymous's picture
Guru

Tyssen wrote:Although I

Tyssen wrote:
Although I think this method may be a bit suspect as a way of doing rounded corners.

I agree. It seems to be thinking in terms of tables for layout. Using CSS you don't make a column just for right and left borders. If it is a one column layout then just make a one column layout with an appropriate background image.

acoustika
Offline
newbie
Last seen: 10 years 48 weeks ago
Joined: 2006-12-01
Posts: 10
Points: 0

well

Well It's not just a one column lauout...
It's to make a kind of header graphic with a halv rounded box, so it's only top left and right that has to be rounded... and it's for making the middle box stretch out to the corners so that I can have it be a percentage width...
But i manged to do it with absolute position like I want.... But just got scared 'bout the absolute after some reading in here... seems that everybody says... DON'T...
But you can see how i did it og what I meant here
And dont mention the look and layout... it was just an idea and the design is just some testing for now:-)

Triumph (not verified)
Anonymous's picture
Guru

:shrug:

:shrug:

Looks like a one column layout to me.

My blog is also a one column layout with rounded corners.

acoustika
Offline
newbie
Last seen: 10 years 48 weeks ago
Joined: 2006-12-01
Posts: 10
Points: 0

well

Yes I see your blog.... But it doesn't do what I want...
It does not expand like I want and like mine you for now....
It was easy to make one column with a background image if I wanted a fixed width... that is not what I want... I want a percentage width so that it expand... But well i'll keep playing with it... but for now the way I did it seems to work...
But thanks for the answers.. still helped a bit

Triumph (not verified)
Anonymous's picture
Guru

acoustika wrote:Yes I see

It is the same technique as here.

As you can see you can either make it fixed by defining a fixed width or expanding by simply leaving out a fixed width. One column. Rounded corners. Whoopee.

Triumph (not verified)
Anonymous's picture
Guru

Triumph wrote:It is the same

Triumph wrote:
It is the same technique as here.

As you can see you can either make it fixed by defining a fixed width or expanding by simply leaving out a fixed width. One column. Rounded corners. Whoopee.

edit - Ah, thanks to a recent post by kk5st I now know that this technique is called Thrashbox. http://www.vertexwerks.com/tests/sidebox/

It is my favorite version of rounded corners because it doesn't rely on a bunch of extra divs or javascript.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 38 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

There's actually an update

There's actually an update to that technique linked to from that article: http://www.modxcms.com/simple-rounded-corner-css-boxes.html

The problem I found with that technique last time I went looking for one was that it's not fluid. He says at the bottom that he'll attempt that in Part 3 but Part 2 hasn't emerged yet and Part 1 was written in January.

For a round-up of just about every rounded corners technique known to man: http://www.smileycat.com/miaow/archives/000044.html

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Triumph (not verified)
Anonymous's picture
Guru

Tyssen wrote:There's

Tyssen wrote:
There's actually an update to that technique linked to from that article: http://www.modxcms.com/simple-rounded-corner-css-boxes.html

The problem I found with that technique last time I went looking for one was that it's not fluid. He says at the bottom that he'll attempt that in Part 3 but Part 2 hasn't emerged yet and Part 1 was written in January.

For a round-up of just about every rounded corners technique known to man: http://www.smileycat.com/miaow/archives/000044.html
Ah, I didn't notice the update. It still breaks with a few text size increases.

I modified the technique combining it with faux columns so that it won't break with text size increases.