Sign in to follow this  
CodaKiller

[web] How to make a div which does not auto size it's width to fit it's content?

Recommended Posts

I have three DIVs width on two of them is set to 200px, one floats to the left and the other floats to the right. I then have the width on the center one set to 100% which makes it fill the space between them perfectly. My problem comes when I load content in to the center div, it expands it's width to fit the content and pushes the other two divs out of the way. How can I prevent it from auto expanding to fit content on the horizontal axis?

Share this post


Link to post
Share on other sites
What kind of content are you loading into the div?

If you're loading images which are larger than the div size then it is expected that the div will resize itself to fit the images.

To avoid that, look into the CSS overflow property.

Share this post


Link to post
Share on other sites
Please check out this so you can understand the problem.

When you hit the news tab it messes up the two side DIVs but the other tabs which do not contain enough content to do it are fine.

Share this post


Link to post
Share on other sites
Your site is missing a doctype, which causes the browser to enter quirks mode as opposed to standards mode. Add a correct doctype before trying to make any changes, else you'll be trying to get a site to work in a world each browser interprets the rules quite differently.

(Interestingly, the site works fine in Opera with the doctype missing; add the doctype and it "breaks" in the same way in IE and Opera).

Share this post


Link to post
Share on other sites
Quote:
Original post by benryves
Your site is missing a doctype, which causes the browser to enter quirks mode as opposed to standards mode. Add a correct doctype before trying to make any changes, else you'll be trying to get a site to work in a world each browser interprets the rules quite differently.

(Interestingly, the site works fine in Opera with the doctype missing; add the doctype and it "breaks" in the same way in IE and Opera).


My site seems to only work the way I intend on Google Chrome and I've tried a few different doc types and they all mess it up. What should I do?

EDIT: It appears that the DIV tags need something inside in order to display there backgrounds... What can I do about this?

[Edited by - CodaKiller on August 19, 2009 11:56:18 AM]

Share this post


Link to post
Share on other sites
Quote:
Original post by CodaKiller
My site seems to only work the way I intend on Google Chrome and I've tried a few different doc types and they all mess it up. What should I do?
Judging by your existing code I'd try starting with XHTML 1.0 Strict.
Quote:
EDIT: It appears that the DIV tags need something inside in order to display there backgrounds... What can I do about this?
You could specify a min-height and/or min-width.

Columnar layouts are tricky owing to deficiencies in CSS; if you search online for "3 column layout" you can find quite a lot of useful information.

Share this post


Link to post
Share on other sites
Quote:
Original post by benryves
Quote:
Original post by CodaKiller
My site seems to only work the way I intend on Google Chrome and I've tried a few different doc types and they all mess it up. What should I do?
Judging by your existing code I'd try starting with XHTML 1.0 Strict.
Quote:
EDIT: It appears that the DIV tags need something inside in order to display there backgrounds... What can I do about this?
You could specify a min-height and/or min-width.

Columnar layouts are tricky owing to deficiencies in CSS; if you search online for "3 column layout" you can find quite a lot of useful information.


Sweet you found a page that works exactly how I want mine to!

Though I can't understand why his page works and not mine but I'll figure it out!

Share this post


Link to post
Share on other sites
Grrr!! His does not actually work, he filled the DIVs with text to keep them from collapsing...

EDIT: Actually it does work, all I needed to do was set the height and width of the border divs but now I have another problem, min-height won't work and I have to have it to make this work...

[Edited by - CodaKiller on August 19, 2009 1:37:50 PM]

Share this post


Link to post
Share on other sites
His design appears to stretch to whichever column has the tallest content in it.

If any of your columns contain any elements that have float:left; (or similar) set on them, try putting a <div style="clear:both;"></div> at the bottom of the column.

Share this post


Link to post
Share on other sites
What you need to do is set "width: auto" on the center div, not 100%. Then give the center div at least 200px left and right margin. That way the floatred left and right columns will fall in the margin of the center column and the center column will not expand enough to push the left or right divs away.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this