Jump to content

Fluid layouts


DarkxPunk
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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 by davej
Link to comment
Share on other sites

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 by DarkxPunk
Link to comment
Share on other sites

  • 4 weeks later...

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 by davej
Link to comment
Share on other sites

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>
Link to comment
Share on other sites

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 by dsonesuk
Link to comment
Share on other sites

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 by davej
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by davej
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
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
 Share

×
×
  • Create New...