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; disp开发者_Go百科lay:inline;}
You can use the follwing code to center the div side by side.
<html>
<head>
<style type="text/css">
body {text-align: center; width: 100%;}
.centerdiv {margin: 0 auto;width: 100%;margin-left:40%;}
.float1{border:1px solid black;width:10%;float:left;}
</style>
</head>
<body>
<div class="centerdiv">
<div class = float1>Hello</div>
<div class = float1>Hai</div>
</div>
</body>
</html>
Hope this helps!!!!!!
精彩评论