Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Containing div collapses in fluid layout

When resized the list expands outside the containing div



4:07 pm on Jun 2, 2011 (gmt 0)


I have been trying to create a fluid design with only divs and no tables (like I'm suppose to...), but I am having a problem with one of the divs. Navbar, when resizing the window, allows for the word "testimonials" to span outside of it. The other containing divs (with the same class) do not have this problem. I have validated my code and style sheets and they are cleared. Please help! Below is some of the code and css.

Thank you.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="_notes/trial.css" rel="stylesheet" type="text/css" />

<div id="minmax">

<div class="container" id="navbar">

<ul><li><a href="Templates/index.htm" title="Home Page">Home</a></li></ul>
<ul><li><a href="Templates/about.htm" title="About Us">About Us</a></li></ul>
<ul><li><a href="Templates/services.htm" title="Services">Services</a></li></ul>
<ul><li><a href="Templates/testimonial.htm" title="Testimonials">Testimonials</a></li></ul>
<ul><li><a href="Templates/contact.htm" title="Contact">Contact</a></li></ul>

</div> <!-- end navbar-->

<div class="container" id="summary">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum aliquam scelerisque. Vestibulum viverra condimentum felis sit amet tincidunt. Donec at lacus at sapien tincidunt pharetra. Donec in nibh id libero bibendum venenatis sit amet sit amet ligula. Aliquam nec ligula odio, ut tincidunt nibh. Praesent sagittis purus vel eros.
</div> <!--end summary-->

<div class="container" id="media">
<p> something will go here...</p>
</div><!-- end media-->

</div><!-- end minmax-->

<div class="container" id="footer">
<p><a href="Templates/index.htm" title="Home Page">Home</a>
<a href="Templates/contact.htm" title="Contact">Contact</a>
<a href="legal.htm" title="Legal/ Privacy"> Legal/Privacy</a>
<a href="sitemap.htm" title="Sitemap">Sitemap</a></p>
</div><!-- end footer-->

</div><!-- end scroller-->



html, body {margin:0; padding:0; width:100%; height: 100%; overflow: hidden; color:#000}

.container {
#scroller {
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
z-index: 2;
left: 0px;
top: 0px;
#minmax {
min-width: 700px;
max-width: 1200px;
width: 100%;
margin: 0 auto;
min-height: 100%;
#navbar {
float: left;
width: 25%;
z-index: 3;
margin-top: 20%;
margin-left: 10%;
#summary {
float: left;
width: 45%;
z-index: 3;
margin-top: 35%;
margin-left: 10%;
#media {
width: 80%;
z-index: 3;
margin-left: 10%;
margin-top: 10%;
margin-bottom: 10%;
#footer {
width: 100%;
clear: both;
bottom: 0%;
height: 5em;
#wrapper {
width: 80%;
margin: 0 auto;
p {
color: #ffffff;
padding: 20px;

#summary, #media p {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
font-weight: normal;
text-align: justify;
#footer p {
font-family: "BankGothic Md BT", "Trajan Pro", Arial;
font-size: 17px;
padding-right: 10%;
word-spacing: 1em;
#navbar ul {
font-family:"BankGothic Md BT", "Trajan Pro", Arial;
font-size: 20pt;
text-align: center;
list-style-type: none;
padding: 5px;


11:28 am on Jun 3, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

Hi IndigoSwing and welcome to WebmasterWorld :). Thanks for the code sample and explanation - and thumbs up for validating too!

On the provided code "testimonials" isn't behaving like the text in the other containers because it is a single word ... and I know that is obvious ;)

The text in the other containers is breaking and wrapping to a new line at the whitespace between words. As "testimonials" is a single word there isn't any whitespace to break - and with nothing to break, it pokes out the side. This is "expected" behaviour. Note the problem also arises if the user zooms the text/page larger as well.

How to avoid depends on what you want to achieve. I don't imagine you want to break a word in a menu, but if you did, you can use word-space:break word. For versions of ie, set on the element with the width, which is #navbar, although other browsers will accept it on the <a> or <ul>. Another way is to give #navbar a min-width so it doesn't collapse "narrower" than the width of the word.


2:17 pm on Jun 3, 2011 (gmt 0)

Thank you Alt131!

I would prefer to not break the word since it is in a navigation bar, but if I use min-width on the #navbar will IE recognize it? I know that some versions of the browser are not compatible with those attributes. Would I then need a hack for IE? My min-width for the whole page is set to 700px, which I suppose I could change to a larger number, but I'm trying to make it cooperate with people running 800 X 600 resolution. I'm not terribly proficient with fluid designs, so I'm feeling out of my element.

Thank you for your help!


1:52 pm on Jun 4, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

Hi IndigoSwing, I suggested min-width as you've already used it - and you are correct that creates issues for legacy browser versions that don't understand it. However, ie6 won't collapse the element below what is required to contain the content, so not so much troubles there. If you haven't already, you may find the discussion of using width and min-width [reference.sitepoint.com] together helpful.

I didn't comment previously as this is sample code so assumed a few things "missing", but note to take care with things like overflow: hidden; (set on the body and html). That means the browser won't produce scrollbars - and for me a straight copy/paste of your code defaulted to just over 1000px high. As that was greater than my viewport height most of the page content was inaccessible until I removed it. Also z-index only applies to elements that have a position.

IMO, for flexible designs remember the basics. To illustrate by example: A valid document with a heading, a couple para's and zero styles can be "read" on most every user agent, device and platform, regardless of the how much the user zooms the text size large, or how tiny the viewport - styling a document with the maximum flexibility is the easiest thing of all!


4:34 pm on Jun 10, 2011 (gmt 0)

Hi Alt131-

It's taken a couple of days to get back to my coding, but I used the min-width attribute on the #navbar and it seems to have fixed my problem perfectly. (Well, in compatible browsers at least.)

Some of my code is missing from the sample I posted as per the forum guidelines. The reason I have hidden set on the overflow for the body is because I have a large background image absolutely positioned with 100% width and height. The #scroller controls my scroll bar, so the complete code generates the scroll bar when needed. Thank you for bringing these points up though. As I said before, the fluid layout is new to me, so I appreciate any and all help! I have removed the z-index from the none positioned elements. Must have been leftover code from some of my trial and error attempts.

Thank you again for all your help!

Featured Threads

Hot Threads This Week

Hot Threads This Month