dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: Problem sizing floating divs

Hybrid View

  1. #1
    Join Date
    Aug 2003
    Location
    Sydney, Australia
    Posts
    700

    Problem sizing floating divs

    I have a dynamically generated web page that is constructed using floated divs. The idea is that my CMS can put whatever I like pretty much anywhere on a page within a grid structure.

    However, I run into two problems.

    The first is that because the pages use floating divs, they do not inherit height so I can't say "height:100%" in the floating blocks, which means they size up according to their content and not according to the page layout. I've tried running a JavaScript routine when the page loads to collect the height of the div each row of floats is contained in, and then apply that height to all of the divs in that row but it doesn't work. Indeed, it doesn't even read the div height correctly. Does anyone know how I can make all of the divs in that float row the same height as the highest of them?

    The second is that I then want to be able to vertically align whatever element I put into that block. I've tried creating css tables inside the divs but that doesn't seem to work either, perhaps because of the height issue. Any suggestions?

    Here is the latest html...
    HTML Code:
    <body>
    	<div id='holder' style='width:900px; margin: 0 auto 0 auto'>
    		<div id='r1' style='border:1px solid black; margin:-1px;'>
    			<div style='float:left; width:300px; min-height:10px; margin:-1px; border:1px solid #FFFFFF'>
    				<div id='r1c1' style='display: table; width:100%; text-align: left;  border: 1px solid black'>
    					<div id='d11' style='display:table-row; '  onmouseover="getlocation('d11')">
    						<div style='display:table-cell; vertical-align: middle; height:100%; background-color:#FFFFFF'>
    							<img src='/images/graphics/image.jpg'><span id='s1c1'></span>
    						</div>
    					</div>
    				</div>
    			</div>
    			<div style='float:left; width:300px; min-height:10px; margin:-1px; border:1px solid #FFFFFF'>
    				<div id='r1c2' style='display: table; width:100%; text-align: left;  border: 1px solid black'>
    					<div id='d12' style='display:table-row; '  onmouseover="getlocation('d12')">
    						<div style='display:table-cell; vertical-align: middle; height:33%; background-color:#FFFFFF'>
    							This is empty.<span id='s1c2'></span>
    						</div>
    					</div>
    					<div id='d12' style='display:table-row; '  onmouseover="getlocation('d12')">
    						<div style='display:table-cell; vertical-align: middle; height:34%; background-color:#FFFFFF'>
    							This is empty.<span id='s1c2'></span>
    						</div>
    					</div>
    					<div id='d12' style='display:table-row; '  onmouseover="getlocation('d12')">
    						<div style='display:table-cell; vertical-align: middle; height:33%; background-color:#FFFFFF'>
    							This is empty.<span id='s1c2'></span>
    						</div>
    					</div>
    				</div>
    			</div>
    			<div style='float:left; width:300px; min-height:10px; margin:-1px; border:1px solid #FFFFFF'>
    				<div id='r1c3' style='display: table; width:100%; text-align: left;  border: 1px solid black'>
    					<div id='d13' style='display:table-row; '  onmouseover="getlocation('d13')">
    						<div style='display:table-cell; vertical-align: middle; height:100%; background-color:#FFFFFF'>
    							<div style='margin-bottom:10px;'>
    								<form name='login' id='login' method='POST' action='/security.php'>
    								<input type='hidden' name='act' value='logout'>
    								<div style='background-color:#F1F1F1; height:16px; margin-bottom:2px;'>
    									<p style='margin-left:4px; margin-top:4px; margin-bottom:1px; font-weight:bold; '>Welcome Back </p>
    								</div>
    								<p><input style='font-size:8pt; width:190px; font-weight:bold' type='submit' value='Log Out'></p>
    							</div>
    							<span id='s1c3'></span>
    						</div>
    					</div>
    				</div>
    			</div>
    			<div style='clear:both'>
    			</div>
    		</div>
    		<div id='r2' style='border:1px solid black; margin:-1px;'>
    			<div style='float:left; width:900px; min-height:10px; margin:-1px; border:1px solid #000000'>
    				<div id='r2c1' style='display: table; width:100%; text-align: left;  border: 1px solid black'>
    					<div id='d21' style='display:table-row; '  onmouseover="getlocation('d21')">
    						<div style='display:table-cell; vertical-align: middle; height:100%; background-color:#000000'>
    							This is empty.<span id='s2c1'></span>
    						</div>
    					</div>
    				</div>
    			</div>
    			<div style='clear:both'>
    			</div>
    		</div>
    		<div id='r3' style='border:1px solid black; margin:-1px;'>
    			<div style='float:left; width:300px; min-height:10px; margin:-1px; border:1px solid #FFFFFF'>
    				<div id='r3c1' style='display: table; width:100%; text-align: left;  border: 1px solid black'>
    					<div id='d31' style='display:table-row; '  onmouseover="getlocation('d31')">
    						<div style='display:table-cell; vertical-align: middle; height:100%; background-color:#FFFFFF'>
    							This is empty.<span id='s3c1'></span>
    						</div>
    					</div>
    				</div>
    			</div>
    			<div style='float:left; width:600px; min-height:10px; margin:-1px; border:1px solid #FFFFFF'>
    				<div id='r3c2' style='display: table; width:100%; text-align: left;  border: 1px solid black'>
    					<div id='d32' style='display:table-row; '  onmouseover="getlocation('d32')">
    						<div style='display:table-cell; vertical-align: middle; height:100%; background-color:#FFFFFF'>
    							This is empty.<span id='s3c2'></span>
    						</div>
    					</div>
    				</div>
    			</div>
    			<div style='clear:both'>
    			</div>
    		</div>
    	</div>
    	<script type='text/javascript'>
    	<!--
    	h = document.getElementById('r1').offsetHeight;
    	document.getElementById('r1c1').style.height = h;
    	m = 'R1 C1 H: ' +h;
    	document.getElementById('s1c1').innerHTML = m;
    	document.getElementById('r1c2').style.height = h;
    	m = 'R1 C2 H: ' +h;
    	document.getElementById('s1c2').innerHTML = m;
    	document.getElementById('r1c3').style.height = h;
    	m = 'R1 C3 H: ' +h;
    	document.getElementById('s1c3').innerHTML = m;
    	h = document.getElementById('r2').offsetHeight;
    	document.getElementById('r2c1').style.height = h;
    	m = 'R2 C1 H: ' +h;
    	document.getElementById('s2c1').innerHTML = m;
    	h = document.getElementById('r3').offsetHeight;
    	document.getElementById('r3c1').style.height = h;
    	m = 'R3 C1 H: ' +h;
    	document.getElementById('s3c1').innerHTML = m;
    	document.getElementById('r3c2').style.height = h;
    	m = 'R3 C2 H: ' +h;
    	document.getElementById('s3c2').innerHTML = m;
    	-->
    	</script>
    </body>
    Of course, some of the elements, like the <span>s are there to help me debug.

    Any suggestions?

    Thanks
    CTB

  2. #2
    Join Date
    Aug 2003
    Location
    Sydney, Australia
    Posts
    700
    Hmmm... ok... problem (almost) solved.

    Instead of using floats, I'm setting up a div table for each row. This solves both problems at once. It equalises each column in the row, and it allows me to use style='vertical-align: whatever' to arrange the elements.

    The only problem I then have occurs when I have a table within a table. The height of the inner table and its cells can't be set other than by their content.

    Just for fun, here's the code...
    HTML Code:
    <html>
    	<head>
    	</head>
    	<body>
    		<div id='holder' style='width:900px; margin: 0 auto 0 auto'>
    			<div style='display: table; width:100%; border:1px solid black; margin:-1px;'>
    				<div styl='display:table-row'>
    					<div style='display: table-cell; vertical-align: middle; width:300px; height:100%; border: solid 1px black; margin:-1px;'>
    						<img src='/images/graphics/image.jpg'>
    					</div>
    					<div style='display: table-cell; width:300px; height:100%; border: solid 1px black; margin:-1px;'>
    						<p>this</p>
    						<p>this</p>
    						<p>this</p>
    						<p>this</p>
    						<p>this</p>
    						<p>this</p>
    						<p>this</p>
    						<p>this</p>
    						<p>this</p>
    						<p>this</p>
    					</div>
    					<div style='display: table-cell; width:300px; height:100%; border: solid 1px black; margin:-1px;'>
    						<div style='width:300px;position:absolute; top:0px; height:100px; border: solid 1px black; margin:-1px;'>
    						</div>
    						<div style='width:300px; position:absolute; top:100px; height:100px; border: solid 1px black; margin:-1px;'>
    						</div>
    						<div style='width:300px; position:absolute; top:200px; height:100px; border: solid 1px black; margin:-1px;'>
    						</div>
    					</div>
    				</div>
    			</div>
    			<div style='display: table; width:100%; height:30px; background-color:#000000; border:1px solid black; margin:-1px;'>
    				<div styl='display:table-row'>
    					<div style='display: table-cell; vertical-align: middle; width:300px; height:100%; border: solid 1px black; margin:-1px;'>
    						
    					</div>
    				</div>
    			</div>
    			<div style='display: table; width:100%; border:1px solid black; margin:-1px;'>
    				<div styl='display:table-row'>
    					<div style='display: table-cell; vertical-align: middle; width:300px; height:100%; border: solid 1px black; margin:-1px;'>
    						<img src='/images/graphics/wroof.jpg'>
    					</div>
    					<div style='display: table-cell; text-align:center; vertical-align: middle; width:300px; height:100%; border: solid 1px black; margin:-1px;'>
    						<p>this</p>
    						<p>this</p>
    						<p>this</p>
    						<p>this</p>
    						<p>this</p>
    						<p>this</p>
    						<p>this</p>
    						<p>this</p>
    						<p>this</p>
    						<p>this</p>
    					</div>
    					<div style='display: table-cell; width:300px; height:100%; border: solid 1px black; margin:-1px;'>
    						<div style='display:table; width:300px; border: solid 1px black; margin:-1px;'>
    							<div style='display:table-row'>
    								<div style='display:table-cell; text-align:center; min-height:100px; border: solid 1px black; margin:-1px;''>
    									<p style='text-align:center'>text</p>
    									<p>text</p>
    									<p>text</p>
    									<p>text</p>
    									<p>text</p>
    									<p>text</p>
    									<p>text</p>
    									<p>text</p>
    									<p>text</p>
    									<p>text</p>
    									<p>text</p>
    									<p>text</p>
    									<p>text</p>
    									<p>text</p>
    									<p>text</p>
    									<p>text</p>
    									<p>text</p>
    									<p>text</p>
    									<p>text</p>
    									<p>text</p>
    								</div>
    							</div>
    							<div style='display:table-row'>
    								<div style='display:table-cell; text-align:center; min-height:50px; border: solid 1px black; margin:-1px;''>
    									<p>text</p>
    									<p>text</p>
    								</div>
    							</div>
    							<div style='display:table-row'>
    								<div style='display:table-cell; text-align:center; min-height:200px; border: solid 1px black; margin:-1px;''>
    									<p>text</p>
    									<p>text</p>
    									<p>text</p>
    								</div>
    							</div>
    						</div>
    					</div>
    				</div>
    			</div>
    			<div style='display:table; width:100%'>
    				<div style='display:table-row'>
    					<div style='display:table-cell; text-align:right; width:50%'>
    						<img src='/images/test-l.jpg'>
    					</div>
    					<div style='display:table-cell; text-align:left; width:50%'>
    						<img src='/images/test-r.jpg'>
    					</div>
    				</div>
    			</div>
    		</div>
    	</body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles