PDA

View Full Version : Possible to center block-level element with relative width?



ideaessence
Jan 16th, 2010, 09:50 PM
I'm working on re-coding a layout that has a fixed width so that I can make it a liquid layout. I'm doing this because a few people with big monitors said the layout only took up 1/3 of the width of their screen. I have tried the

margin: 0 auto;
method but it doesn't work. The width of the DIV is 95%. Can I center the DIV or is there not way around it?

Edit:

Here is the site in fixed width:
http://ideaessence.com/mullaneylawoffices

(I am on 1024 x 768.)

Here is where I'm re-coding it:
http://ideaessence.com/new

Donkey
Jan 17th, 2010, 01:13 AM
If the width is 95% then you need a 2.5% margin each side. It should work if you just set the left margin to 2.5%.

ideaessence
Jan 17th, 2010, 01:33 AM
Thank you. That sounds like it will work. I brainstormed all kinds of weird "position:absolute" ideas and that was such a simple solution...


I have one more, equally important problem with relative widths and CSS.

float: left;
does not work unless a fixed width is declared. I am trying to make one fixed column for navigation on the left and one horizontally scalable column for content to the right of it. Whenever I change the width to a percent, the content column does not float and it actually goes directly below the navigation (yikes). Does anyone know how to fix that?

abduraooft
Jan 17th, 2010, 12:27 PM
Whenever I change the width to a percent, the content column does not float and it actually goes directly below the navigation (yikes). Does anyone know how to fix that? Check some good layouts at http://bonrouge.com/2c-hf-fluid.php and http://bonrouge.com/2c-hf-fullyfluid.php

ideaessence
Jan 17th, 2010, 05:51 PM
I was wrong with an assumption. You can float a DIV with a percentage width and min-width in px specified. The problem is that I have 2 columns side by side, sharing the same parent element, yet 1 column is scalable (content column) and the other is fixed (navigation). So by making the content column 100%, it can't fit in the same space as the navigation column that shares the same parent element.

The best I could do was take the content column and give it a min-width that takes up all area the navigation column doesn't (720px). Then I gave it the largest percentage width possible (76%) without it breaking the layout.

Unfortunately, while this does scale now, so does the increasing margin on the right:
http://www.ideaessence.com/new/

If I could just eliminate that right margin from scaling, I would be golden to tweak the other small things and make this work perfectly. I really don't want to have to code a whole layout from scratch when it seems like something small that might have a small fix. Is there any quick fix? I would even use a table at this point and prioritize practicality over semantics.

Excavator
Jan 17th, 2010, 05:58 PM
Hello ideaessence,
Instead of floating that #content, try just allowing enough room for the left column and not setting a width. #content will just fill all available space then.
Change your CSS to look like this -

#content {
margin: 0 0 0 220px;
}

Just say NO to tables!

ideaessence
Jan 17th, 2010, 07:43 PM
Thank you! Thank you!

The alignment and scaling are both fixed now. I changed my resolution and looked at it. I haven't thought through why that worked yet, but I'll toy with it and change stuff to figure it out.

Here's a quick, petty question of low importance only if someone has too much free time: Do you think the header would look better centered? Any opinions on that?

Excavator
Jan 17th, 2010, 08:36 PM
Thank you! Thank you!

The alignment and scaling are both fixed now. I changed my resolution and looked at it. I haven't thought through why that worked yet, but I'll toy with it and change stuff to figure it out.

Have a look at a very basic 2 column layout demo (http://nopeople.com/CSS/equal_length_columns/index.html) that uses the same method.