[web] How to make a div which does not auto size it's width to fit it's content?
Author
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?
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.
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.
Author
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.
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.
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).
(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).
Author
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]
Quote:Original post by CodaKillerJudging by your existing code I'd try starting with XHTML 1.0 Strict.
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?
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.
Author
Quote:Original post by benryvesQuote:Original post by CodaKillerJudging by your existing code I'd try starting with XHTML 1.0 Strict.
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?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!
Author
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]
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]
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.
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.
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.
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
