CSS - Getting Divs To Flow

Hello,

My page when correct should show the HeaderContainer, blow that the ActionContainer which has, 3 column divs, then below that the FooterContainer.

It is important that the page build starts with the CenterContainer, then the LeftContainer, then RightContainer.

My issue is that the LeftContainer and RightContainer columns both are aligning to the bottom of each other, and to the bottom of the CenterContainer column. I think this could be an issue with floats. What do you think?

See online demo, http://tlcgiftsandbaskets.com/demo/positioning/position_css.php

Code:

body{
margin: 0pt; margin:0 15px 0 0;
text-align: center;
}

#Container{
position: absolute;
z-index:1;
width: 700px;
height:auto;
left: 50%;
margin-left: -350px;
border-width: 1px;
border-top-style: solid;
border-left-style: solid;
border-right-style: solid;
border-color: #ccbbaa;
background-color: #ffffff;
text-align:left;
}

#ActionContainer	{ margin:0 0 0 0; text-align:left; border:1px solid orange; }
#CenterContainer	{ margin:0 0 0 175px; text-align:left; border:1px solid yellow; width:250px; }
#LeftContainer		{ margin:0 0 0 10px; text-align: left; width: 150px; border:1px solid green; float:left; }
#RightContainer		{ margin:0 0 0 450px; text-align: left; width: 150px; border:1px solid blue; float:right; }
#HeaderContainer	{ margin:0 0 0 0; width: 700px; height: 245px; border:1px solid red; }
#FooterContainer	{ margin:0 0 20px 0; padding:0 0 30px 0; border:1px solid blue; display:block; }

Code:

<div id="Container">

	<div id="ActionContainer">

		<div id="CenterContainer">CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer.</div>

		<div id="LeftContainer">LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer.</div>

		<div id="RightContainer">RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer.</div>

	</div>

	<div id="HeaderContainer">HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer.</div>

	<div id="FooterContainer">FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, </div>

</div>

Is there a way to make text flow through to a new line if there is too much text to fit in the defined width of a button?

'Ello,

This problem is a bit complex to try and explain on here so if this gets too confusing just let me know and I'll try and clear up whatever you are confused about.

I am currently building a site that has a wrapper div with a width set to 100% and a max-width of 1000px so that on smaller screens the site will appear nicer and not have horizontal scrollbars. In this wrapper div is a content div that is 84% of the wrappers width and has it's margin set to 0 auto to make in then content div centre in the wrapper.

What I'm wondering is if there is a way to change the content divs width from 84% to 100% once the wrapper div get to a small enough size. At the moment when the screen gets too small the content div is still 84% size of the wrapper div and centred, but say on a screen with a resolution of 800x600 I think it would be more beneficial to have to content div take up the whole wrapper to display more content.

I was thinking of setting a min-width but then if the screen gets smaller than the min-width a horizontal scroll bar would appear.

I was just wondering if something like this was possible, if not it doesn't matter to much as I can set the min-width up for a 800x600 screen resolution and anything below that probably isn't too important anyway.

hi

i have a table that has another small table of a fixed height aligned to the right. what i want is that when i enter text in the larger table, the text should 'flow' around the corner of the table.


+----------+----+
+....1.....+..2.+
+..........+----+
+...............+
+---------------+


when i enter text in 1, i want that it wraps it around 2 as well. please tell me how to do it.

HI,

I have an A-Z contents list for my website. I can manually split the list into 3 columns of equal length, but that only works as long as the list doesn't change length and the window is the right size.

Is there a way to have a single long list and automatcally show it in 3 newspaper style columns?

Thanks

Richard

Can be all viewed here ->
http://streaming.smad.jmu.edu/smad307/ring/gloo

I have three layers starting at the same position on the page. Each layer has a Y-repeat repeating image that tiles seamlessly. There is one for the left spacer, the middle content, and the right spacer. The Nav menu on the left are just images placed in at the top of the left spacer layer. I'm trying to get each of these layers to expand as content fills up the middle Content layer. This doesnt work at all in Firefox - with any excess content just heading off into white space. And it works somewhat with IE - with only the Content layer to expand as content fills it.

I know this is a recurring issue with CSS, but is there a simple fix for this? I've seen this done before without any Javascript hacks, but can't remember where. I do remember, it didn't look like the most graceful solution.

And in IE, the navigation .gifs on the left have a gap between each of them. I found that odd since they're just <IMG>s within the layer.

Any help would be greatly appreciated

Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right.

To simplify my problem, look at this example.
Code:

<html>
  <body>
    <div style="float:right">
      Hello there!
    </div>
    <hr>    
  </body> 
</html>

If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly.

It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so:

Code:

<html>
  <body>
    <div style="border: 1px solid #000; ">
      <div style="float:right">
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
      </div>
      <div style="clear: both"></div>
    </div>
    <hr>    
  </body> 
</html>

Am I missing something fundamental here? Is there a better solution? Thanks in advance.

Here's the site in Question: http://www.winchps.vic.edu.au

It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6.

Here's the CSS code for the basic layout:

Code:

body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}

#header {
width: 802px;
}

#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}

#content {
padding: 0px;
margin: 0px;
}

#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}

#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}

#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}

#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}

#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}

I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc).

Anyone got any ideas?

Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF.

The Example

I've read a bunch about how div's won't stretch to accomidate div's inside of them if they overrun the height/min-height set for the container div.

How do I get around this? You can see the skeleton of the site above. It's fine unless you resize the window smaller than the content.

Alright, I've been working on my own custom border box for a while and I've almost got it, but it has a few problems still. How I do it is I have one div that contains it all (.box) that defines the height and width of the whole box. Then I have three boxRows to lay out the images, and then I define how three cells in each of those rows should behave, very much like how custom borders used to be done with tables. Here are the problems:

In both firefox and internet explorer, the bottom row and the far right column actually appear OUTSIDE the .box containing box.

There are two additional problems in internet explorer. First, the middle row handles the auto height differently and only expands about 10px instead of the height of the containing box. The second is that the whole middle row for some reason appears to be pushed to the right by about 16px.

Any help would be appreciated. Here's the code:

HTML:

Code:

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="reset.css" />
		<link rel="stylesheet" type="text/css" href="testBox.css"> 	
	</head>
	<body>

		<div class="box">
			<div class="boxRowTop">
				<div class="boxCellLeft"></div>
				<div class="boxCellMiddle"></div>
				<div class="boxCellRight"></div>
			</div>
			<div class="boxRowMiddle">
				<div class="boxCellLeft"></div>
				<div class="boxCellMiddle"></div>
				<div class="boxCellRight"></div>
			</div>
			<div class="boxRowBottom">
				<div class="boxCellLeft"></div>
				<div class="boxCellMiddle"></div>
				<div class="boxCellRight"></div>
			</div>

	</body>
</html>

And here is the layout css file:

Code:

/* Box classes */
.box {
	background: rgb(120,120,120);
	height: 200px;
	width: 500px;
}
.boxRowTop {
	height: 16px;
	position: relative;
	width:%100;
}
.boxRowMiddle {
	height: auto;
	width:%100;
	position: relative;
}
.boxRowBottom {
	height: 16px;
	width:%100;
	position: relative;
}
.boxCellLeft {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 16px;
}
.boxCellMiddle {
	height: 100%;
	margin-left: 16px;
	margin-right: 16px;
	width: auto;
}
.boxCellRight {
	height: 100%;
	left: 100%;
	position: absolute;
	top: 0;
	width: 16px;
}


/* Define Cell Backgrounds/Images */
.boxRowTop .boxCellLeft {
	background: url(../LandingImages/topleft_circ_corner.png) no-repeat;
}
.boxRowTop .boxCellMiddle {
	background: url(../LandingImages/top_border.png) repeat-x;
}
.boxRowTop .boxCellRight {
	background: url(../LandingImages/topright_circ_corner.png) no-repeat;
}
.boxRowMiddle .boxCellLeft {
	background: url(../LandingImages/left_border.png) repeat-y;
}
.boxRowMiddle .boxCellMiddle {
	background: rgb(255,255,255);
}
.boxRowMiddle .boxCellRight {
	background: url(../LandingImages/right_border.png) repeat-y;
}
.boxRowBottom .boxCellLeft {
	background: url(../LandingImages/bottomleft_circ_corner.png) no-repeat;
}
.boxRowBottom .boxCellMiddle {
	background: url(../LandingImages/bottom_border.png) repeat-x;
}
.boxRowBottom .boxCellRight {
	background: url(../LandingImages/bottomright_circ_corner.png) no-repeat;
}

And last, the reset CSS, which I don't think has anything to do with the problems because if I take it out it still has them.

Code:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption
{
	margin:0;
	padding:0;
	border:0;
	vertical-align:baseline;
}

* {font-size:1em; font-family: inherit;}

:focus {outline:none;}

body { font-size: 62.5%; line-height:normal; font-family: Arial, Sans-Serif; color:Black; } /* 62.5% (10px), 75% (12px), 87.5% (14px), 100% (16px) */

p {	margin: 0 0 1.2em 0; }

a			{ color:#ff0000;	text-decoration:none; }
a:link		{ color:#ff0000;	text-decoration:nonee; }
a:visited	{ color:#ff0000;	text-decoration:none; }
a:active	{ color:#ff0000;	text-decoration:none; }
a:hover		{ color:#ff0000;	text-decoration:none; }

a.h1,a.h2,a.h3,a.h4,a.h5,a.h6,h1,h2,h3,h4,h5,h6
{
	font-weight:bold;
	display:block;
	text-decoration:none;
	color:Black;
}

h1, a.h1, a:link.h1, a:visited.h1, a:active.h1, a:hover.h1 { color:Black; text-decoration:none; font-size: 2.00em; }
h2, a.h2, a:link.h2, a:visited.h2, a:active.h2, a:hover.h2 { color:Black; text-decoration:none; font-size: 1.75em; } /* this is normally skipped? 1.50em */
h3, a.h3, a:link.h3, a:visited.h3, a:active.h3, a:hover.h3 { color:Black; text-decoration:none; font-size: 1.50em; } /* 1.25em */
h4, a.h4, a:link.h4, a:visited.h4, a:active.h4, a:hover.h4 { color:Black; text-decoration:none; font-size: 1.25em; } /* 1.00em */
h5, a.h5, a:link.h5, a:visited.h5, a:active.h5, a:hover.h5 { color:Black; text-decoration:none; font-size: 1.00em; } /* 0.75em */
h6, a.h6, a:link.h6, a:visited.h6, a:active.h6, a:hover.h6 { color:Black; text-decoration:none; font-size: 0.75em; } /* 0.66em WTF? */

fieldset { border:solid 1px; padding:0.25em 0.5em 0.75em; margin: 0 0 1.5em; }
legend { margin:0 0 0 2em; padding:0 1em; }

textarea, input, select { border:solid 1px #ccc; margin:0; padding:0; }
textarea, input { padding:0 .2em; }
input:focus,textarea:focus,select:focus { border:solid 1px black; }

small { font-size:.9em; }

ul, ol, dl { position: relative; padding:0 0 0 1.5em; margin:1.5em 0; }
dir, menu { margin:1.5em 0; }
/* nested lists have no top/bottom margins */
ul ul,   ul ol,   ul dir,   ul menu,   ul dl,
ol ul,   ol ol,   ol dir,   ol menu,   ol dl,
dl ul,   dl ol,   dl dir,   dl menu,   dl dl,
dir ul,  dir ol,  dir dir,  dir menu,  dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl
{
	margin:0;
	padding: 0 0 0 1.5em;
}

hr { margin:0.75em 0; padding:0; }

Any help would be GREATLY appreciated, as I've been working on this for a while!

Thanks!

http://www.detroitnewspapers.com/dnp-company.html

In IE for windows, the left column (with the gradient) has about a 10px gap between it and the horizontal dark blue bar. This gap doesn't show up on Safari or Firefox (mac), so I'm not sure why it's showing up in IE Windows.

I believe it has something to do with the flash div, but I'm a newbie at table-less layouts.

Any insight would be much appreciated!

Hiya, this is my first time posting here; tia for helping me out with my problem.

I am trying to center a 784 wide page, cut up into multiple divs. It's working, but I am getting a problem which I cannot get rid of. I'm using position:relative, and this is making the page scroll as if the images were below each other. They are showing up in the correct spots, but once the page is finished, I end up with another page worth of white space to scroll through (which I do not want.) I hope this explained it correctly. Below is an example of the html and css I am using. Notice the red drops below the final picture then length of the picture itself. Once the entire page is done, it is about 1500px longer than needed.

*******************************
HTML
*******************************
<html>

<head>
<link rel="stylesheet" type="text/css" href="new.css">
</head>

<body>

<div class="begin">

<div class="header_piece_01"><img src="images/picture_01.jpg"></div>

<div class="rocket_logo"><img src="images/picture_02.jpg"><br><img src="images/picture_03.jpg"><br><img src="images/picture_04.jpg"></div>

</div>

</body>

</html>

*******************************
new.css
*******************************
body {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
text-align : justify;
line-height : 150%;
color : #000000;
margin : 0px;
border : 0px;
padding : 0px;
background-color : #FFFFFF;
}

a {
text-decoration : none;
}

a:hover {
text-decoration : none;
}

.begin {
width : 784px;
background-color : red;
margin-left : auto;
margin-right : auto;
}

.header_piece_01 {
width : 31px;
height : 118px;
}

.rocket_logo {
position : relative;
top : -118px;
left : 31px;
width : 289px;
}

Apologies for my crude code. I'm attempting to learn css on the fly.

My design is looking right on Macs (Firefox, Safari) but the image gallery I've cobbled together is all wrong on pretty much any browser on a PC. Any ideas?

(and also - the menu keeps shifting down about 125px more than it should on IE 6.0, any thought there would be equally appreciated!!)

many, many thanks. I'm at a roadblock.

charlie