...

View Full Version : Two left floated divs inside a centered divs... with no fixed widths



impresently
04-12-2011, 05:39 AM
I am trying to get two elements to sit side by side inside a div or other element, so both two elements are always centered in the page.

Here's the catch... I cannot use any fixed widths, it is dynamically generated by javascript. It would seem that from reading other posts that this is not possible without fixed widths, but I wanted to see if any one had any other ideas to achieve the same result.

HTML:

<body>
<div class="centerdiv">
<div class = float1></div>
<div class = float2></div>
</div>
</body>


CSS:

body {text-align: center; width: 100%;}
.centerdiv {margin: 0 auto;width: 100%}
div.float1 {float:left; display:inline;}
div.float2 {float:left; display:inline;}

_Aerospace_Eng_
04-12-2011, 06:19 AM
What are you ultimately trying to achieve? What is generated by JS? How does it generate it? Why can't it set a width?

bullant
04-12-2011, 06:56 AM
<div class="centerdiv">
<div class = float1></div>
<div class = float2></div>
</div>divs are block level elements and so will by default take up 100% of the width of their parent element - in this case "centerdiv"

float1 and float2 can only sit side by side if their combined widths is less than the width of centerdiv.
How you set the widths of the 2 child divs is up to you.

This demo might help


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
.centerdiv {
width: 80%;
margin: 10px auto 0px auto;
padding: 5px 5px 5px 5px;
border: 1px solid red;
overflow: hidden;
}
.float1 {
width: 50%;
border: 1px solid blue;
float: left;
}
.float2 {
width: 49%;
border: 1px solid green;
float: right;
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<div class="centerdiv">
<div class=float1>Float 1 div</div>
<div class=float2>Float 2 div</div>
</div>
</body>
</html>

impresently
04-12-2011, 03:34 PM
Ever so close! Thanks!

Two divs are now side by side in the center container div, but when the window's width is less than the combined width of the divs, the right floated div jumps to the bottom or overlaps the left floated div. I'd rather a left-right scrollbar appear instead if that is possible.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>canvas fun</title>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="canvas-board.js"></script>
<style type="text/css">
* {margin: 0;padding: 0;border: none;}
canvas {background: #fff; border: 2px solid #000; margin-left: auto; margin-right: auto;}
div.containerbackclass {float:left; border:1px solid green;width: 50%;}
div.containerfrontclass {float:left; border:1px solid green;width: 49%;}
.centerdiv {margin: 0 auto;width: 90%; margin:10px auto 0px auto; padding: 5px 5px 5px 5px; border: solid red;}
body{text-align: center; width: 100%;}
</style>
</head>
<body bgcolor = "#aaa";>
<div class="centerdiv">
<div class=containerfrontclass></div>
<div class=containerbackclass></div>
</div>
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum