Fluid layouts

DarkxPunk · August 13, 2013

Hey everyone,

So I think I need a little schooling on fluid web design...

I am attempting to have two columns with a middle divider shrink in width as the browser window shrinks in width. My current attempt is as follows:

<div id="footerWrap">	<div class="contentWrap">		<div id="footerL">content</div>		<div id="footerD"></div>		<div id="footerR">			<div class="col22">content</div>			<div class="map col21">content</div>		</div>	</div></div>

.contentWrap {	margin: 0 auto;	padding: 3em 0 4.5em;	max-width: 96em;	min-width: 29em;}#footerWrap {	border-top: 0.1em solid #dfdfdf;	height: 29.9em;}#footerWrap .contentWrap {	padding-top: 0 !important;	padding-bottom: 0 !important;	height: 29.9em;}#footerL,#footerD,#footerR {	float: left;}#footerL,#footerR {	margin: 4em 0 2.9em;	width: 44.7%;	min-width: 29em;}#footerL {	margin: 25.2em 5em 2.9em 0;	text-align: center;}#footerR {	margin: 4em 0 2.9em 5em;}#footerD {	margin: 3em .05em 1.9em;	border-left: 0.1em solid #dfdfdf;	height: 25em;	width: 0.005em;}

Now as I shrink the browser window, the right most column decided to flow underneath everything... I have it set to percent, so I don't understand why its not simply shrinking.

Thanks for any help.

davej · August 14, 2013

Uh, don't most non-Canadians use a header on top, and not a footer?

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>fluid?</title><style>*{margin: 0;padding: 0;}p {margin: 15px;}#content {margin: 0 auto;max-width: 800px;min-width: 200px;border: 1px dotted gray;}header{text-align: center;border: 1px dotted blue;}#leftcontent{width: 49%;float:left;color: red;border-right: 1px dotted blue;text-align: justify;}#rightcontent{width: 49%;float: right;color: green;border-left: 1px dotted blue;text-align: justify;}footer {clear: both;color: blue;text-align: center;border: 1px dotted blue;}</style></head><body><div id="content">    <header>      <p>This is the header</p>    </header>    <div id="leftcontent"><p>LEFT Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>    </div>    <div id="rightcontent"><p>RIGHT Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>    </div>    <footer>      <p>This is the footer</p>    </footer></div></body></html>

Warning: I am terrible at CSS so this is probably crude or wrong. It certainly isn't written in the manner of the official "Unsemantic / Grid 960" or anything like that. It definitely needs @media clauses added to be considered "Responsive" and probably should have a "sticky footer" if the page is less than 1500px tall.

Edited August 15, 2013 by davej

DarkxPunk · August 15, 2013

This does not exactly address my issue.

I am using my footer simply because this is where I am having the issue... I need a three column fluid design, the reason is the center column will have a single line creating a divider.

I have been playing further with fluid designs and I just keep hitting bump after bump. For example:

<!DOCTYPE html><html><head><title>Test 4</title><style type="text/css">	html,body {margin:0;border:0;padding:0;width: 100%;height: auto;min-height: 100%;height: 100% !important;}	body {font-size: 62.5%;}	#wrap {margin: 0 auto;max-width: 95em;height: 100px;background: #fbafaf;}	#divL,#divC,#divR {float: left;height: 100px;width: 100%;}	#divL,#divR {max-width: 46.5em;background: #b0faf5;}	#divC {max-width: 2em;background: #f5b0fa;}</style></head><body><div id="wrap">	<div id="divL">Content L</div>	<div id="divC">C</div>	<div id="divR">Content R</div></div></body></html>

I would assume that as I shrink the browser window the divs should shrink, they don't, they flow under. I can't understand why... The width is set as a percentage, so why does it not shrink. I am banging my head and can't find any good templates or tutorials on the web.

Another thing is the reason I am using max-width is because apparently using percentage widths don't always display correctly on all browsers, and they recommend what I am doing, but its not working >.<

I need to be schooled on how to do this properly.

Another issue again:

<!DOCTYPE html><html><head><title>Test 4</title><style type="text/css">	html,body {margin:0;border:0;padding:0;width: 100%;height: auto;min-height: 100%;height: 100% !important;}	body {font-size: 62.5%;}	#wrap {margin: 0 auto;max-width: 95em;height: 100px;background: #fbafaf;}	#divWrap {margin: 0 auto;overflow: hidden;}	#divL,#divC,#divR {float: left;height: 100px;}	#divL,#divR {width: 48%;background: #b0faf5;}	#divC {width: 2%;background: #f5b0fa;}</style></head><body><div id="wrap">	<div id="divWrap">	<div id="divL">Content L</div>	<div id="divC">C</div>	<div id="divR">Content R</div>	</div></div></body></html>

Why does the divWrap's overflow hidden cover more than the floated elements? Like I am so confused right now.

Edited August 15, 2013 by DarkxPunk

davej · September 12, 2013

Sorry, I didn't notice this reply earlier, but I think we've continued this topic in other threads. I think there is confusion when a div is assigned a percent of the width but has run into its max-width so it is not using it's full percent. The other columns don't seem to know this and do not use that available space. Also I have a lot of trouble with rounding errors with percent widths.

<!DOCTYPE html><html><head><title>Darkxpunk Aug 2013 Test 4</title><style type="text/css">html,body {margin:0;border:0;padding:0;/*width: 100%;height: auto;min-height: 100%;height: 100% !important;*/}body {font-size: 62.5%;}#wrap {margin: 0 auto;max-width: 95em;height: 200px;background: #aaa;}#divL,#divR {float: left;height: 175px;width: 47%;}#divL,#divR {/*max-width: 46.5em;*/background: #b0faf5;}#divC {float: left;height: 175px;width: 6%;/*max-width: 2em;*/max-width: 40px;background: #f5b0fa;}</style></head><body><div id="wrap"><div id="divL">Content L</div><div id="divC">C</div><div id="divR">Content R</div></div></body></html>

If you get rid of the max-width in divC it solves one of the problems.

Edited September 13, 2013 by davej

dsonesuk · September 12, 2013

Why does the divWrap's overflow hidden cover more than the floated elements? Like I am so confused right now.

??? I may have misunderstand you, but 48+48+2 = 98%, 2% space left which is what is showing isn't it.

there may be problems with line breaks in html code that could result in spaces taken up part of the width.

You could instead of floating all left, try left = float left, right=float right and keep centre as block without floating but use margins similar to right/left widths to keep it central, its another way of achieving the same result that you might want to consider.

<!DOCTYPE html><html><head><title>Test 4</title><style type="text/css">	html,body {margin:0;border:0;padding:0;width: 100%;height: auto;min-height: 100%;height: 100% !important;}	body {font-size: 62.5%;}	#wrap {margin: 0 auto;max-width: 95em;height: 100px;background: #fbafaf;}        #wrap div {font-size: 1em;}	#divWrap {margin: 0 auto;overflow: hidden;}	#divL,#divR {float: left; height: 100px;}        #divR {float: right;height: 100px;}	#divL,#divR {width: 49%;background: #b0faf5;}	#divC {width: 2%;background: #f5b0fa; margin: 0 49%;}</style></head><body><div id="wrap"><div id="divWrap"><div id="divL">Content L</div><div id="divR">Content R</div><div id="divC">C</div></div></div></body></html>

davej · September 13, 2013

What is a situation here where overflow: hidden is needed?

dsonesuk · September 13, 2013

parent div of floated element cannot detect floated child elements area within them so parent height remains 0, overflow hidden is one way of fixing this problemo.

Edit: it also produces a clear: both effect preventing floating directly proceeding sibling elements, floating to the side if it.

Also prevents collapsing margins issue, where child elements margin, if larger than parents top margin for instance, will seep through the top edge of parent, to give it a margin of identical size instead.

Edited September 13, 2013 by dsonesuk

davej · September 14, 2013

Uh, if I comment it out what should I see different? What content would show the potential problems this fixes? Also I do see the center column overflow into the right column and the left column overflow into the center column, but overflow from the left column does not enter the right column. How is the right column protected from this overflow?

<!DOCTYPE html><html><head><title>Test 4 dsonesuk</title><style type="text/css">html,body {margin:0;border:0;padding:0;width: 100%;height: auto;min-height: 100%;height: 100% !important;}body {font-size: 62.5%;}#wrap {margin: 0 auto;max-width: 95em;height: 100px;background: #fbafaf;}/*#wrap div {font-size: 1em;}*/#divWrap {margin: 0 auto;overflow: hidden;}#divL {float: left;}#divR {float: right;}#divL,#divR {width: 49%;background: #b0faf5;height: 100px;}#divC {width: 2%;background: #f5b0fa; margin: 0 49%;}</style></head><body><div id="wrap">  <div id="divWrap">    <div id="divL">      Content LLLLLLLLLLLLLL    </div>    <div id="divR">      <br/>Content R    </div>    <div id="divC">      CC    </div>  </div></div></body></html>

Edited September 14, 2013 by davej

dsonesuk · September 14, 2013

1)float child elements: disable overflow and check height of divWrap through firebug, it height is that of the none floated middle element.

2) collapsing margins: wrap text in paragraphs, as text on its own has no margins to show the problem, disable overflow: hidden, the floated elements will show correctly paragraphs with margin, away from top edge, the middle margin has extended beyond the top edge of 'divWrap' AND 'wrap' given it the paragraphs margin, forcing it down from top edge of browser.

Also I do see the center column overflow into the right column and the left column overflow into the center column, but overflow from the left column does not enter the right column. How is the right column protected from this overflow?

The large line of text is overflowing onto background of 'wrap' container not the middle.

The left does not show to overflow to the right, because the right has background color, it is hiding the text below it, its due to index layering of elements, right is higher than left, middle is higher than left and right. If you experiment by given position: relative; to these three, and change z-index to match z-index:0; fix the height of middle (height:100px; overflow: hidden required if child element is paragraph), they have same z-index level, and background of these three will show no overflowing of text into their siblings.

davej · September 16, 2013

Uh? This looks fine to me in FF23...

<!DOCTYPE html><html><head><title>Test 4C Dsonesuk/Darkxpunk</title><style type="text/css">*{margin:0;padding:0;}html,body {/*margin:0;padding:0;border:0;width: 100%;height: auto;min-height: 100%;height: 100% !important;*/}body {font-size: 62.5%;}#wrap {margin:0 auto;max-width: 95em;height: 100px;background: #fbafaf;}/*#wrap div {font-size: 1em;}*//*#divWrap {margin: 0 auto;overflow: hidden;}*/#divL {float: left;overflow:hidden}#divR {float: right;}#divL,#divR {width: 49%;background: #b0faf5;height: 100px;}#divC {width: 2%;background: #f5b0fa;margin: 0 49%;overflow:hidden}</style></head><body><div id="wrap">    <div id="divL">      <p>Content LLLLLLLLLLLLLL</p>    </div>    <div id="divR">      <p>Content R</p>    </div>    <div id="divC">      <p>CC</p>    </div></div></body></html>

Edited September 16, 2013 by davej

dsonesuk · September 16, 2013

What! in respect of collapsing margin? well there wouldn't be a problem, they are ALL zeroed.

davej · September 16, 2013

Could you please add content to the divs that will make this problem under discussion visible and obvious to me? Somehow I am not grasping the issue here.

dsonesuk · September 16, 2013

Use firebug and select paragraphs, without overflow: hidden applied to parent/parents, it will show yellow margin of paragraph extending beyond top edge of parent/parents IF they are not floated as well, and don't have margin greater than the paragraph. In your above example it will show no margins (yellow) at all on any element, as there are no margins to cause the collapsing margin problem.

davej · September 16, 2013

Well, if I add...

p{margin: 3px 5px;}

I don't see anything bad happen. Am I supposed to see something bad happen?

dsonesuk · September 16, 2013

collapsing margins:

You are right because all three columns have float or overflow hidden, these styling applied will cancel out collapsing margin issue.

enveloping floated elements.

you have made the #wrap a fix height to match column, which is not very fluid, so you won't see a problem, remove fixed height, the height of #wrap will match the NON-FLOATED middle element height only. add overflow hidden, it becomes fluid and envelopes the floated columns as well.

Fluid layouts

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in