Scribd
Upload
7 views

Clips - Css Best Way To Left Align A Float Right Section - Stack Overflow

Uploaded by

like.planes-0x
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

Clips - Css Best Way To Left Align A Float Right Section - Stack Overflow

Uploaded by

like.planes-0x
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

7/23/13 css3 - CSS: Best way to left align a float:right section - Stack Overflow

CSS: Best way to left align a float:right section

I want what in the good old days would be a two­column table layout. It's for
http://paulisageek.com/resume and is working perfectly with:

.dates {
float:right;
width:171px;
}

but I'm sure I'll break the sizes on updates (and different fonts, and browsers, and font­sizes, etc).

Is there a way to make the second column autosize without forcing a width (or using javascript)? Will
CSS3 have a way?

css css3

edited Dec 22 '09 at 4:40 asked Dec 22 '09 at 4:27


Paul Tarjan
10.6k 10 88 150

Please don't this the wrong way but I'd really change the picture you're using. – cletus Dec 22 '09 at 4:42

:) Its much better with context paulisageek.com/paul.jpg but yeah, I totally agree, that is my project for tonight
:) – Paul Tarjan Dec 22 '09 at 4:44

Oh, and I don't know if if you're one to talk you 'slack jawed yokel' – Paul Tarjan Dec 22 '09 at 4:54

To be fair, I don't put my gravatar on my CV. :) – cletus Dec 22 '09 at 5:27

3 Answers

Give your dates column a min­width and a max­width instead of a fixed width. This gives you flexibility
but ensures your design won't break:

.dates {
float:right;
min‐width:171px;
max‐width:300px;
}

Note that min­width and max­width do not include padding, borders, or margins.

Another possibility is make the dates to align right and display inline:

.dates p{
text‐align:right;
display:inline;
}

This way you won't need a separate div for the dates.

...Or, if you want to be super­cutting­edge and ensure that your layout breaks in IE, you can use the new
CSS3 columns (not recommended here, but still worth reading)

answered Dec 22 '09 at 5:20


Gideon
189 8

Yup, it's possible. The keyword to search for is liquid columns. For example this deals with whole layouts
but the points are the same.

answered Dec 22 '09 at 4:32


Pekka 웃
208k 39 361 587
stackoverflow.com/questions/1944175/css-best-way-to-left-align-a-floatright-section 1/2
7/23/13 css3 - CSS: Best way to left align a float:right section - Stack Overflow
208k 39 361 587

That example is a liquid layout but it is liquid in the sense that the whole page can be variable width. The
columns are still fixed width (relative to the outer container) so it doesn't really solve the OP's problem. – cletus
Dec 22 '09 at 4:39

doesn't that just change my px to % basically? Still fixed width on something? – Paul Tarjan Dec 22 '09 at
4:39

What you've got here is something that works extraordinarily well and easily with tables. Not only that it's
incredibly backwards compatible. In "pure" CSS it's hard. You can make one of the columns variable
width but not both. If you really need that, stick with tables (irrespective of what the semantic HTML
zealots might say).

answered Dec 22 '09 at 4:56


cletus
227k 55 514 717

1 giveupandusetables.com – ephemient Dec 22 '09 at 5:11

Funny website, but I disagree. Tables are great for tabular data, not so hot for layouts... – Gideon Dec 22 '09
at 5:23

Not the answer you're looking for? Browse other questions tagged css css3 or ask
your own question.

stackoverflow.com/questions/1944175/css-best-way-to-left-align-a-floatright-section 2/2

You might also like