Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Two left floated divs inside a centered divs... with no fixed widths

    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;}

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    What are you ultimately trying to achieve? What is generated by JS? How does it generate it? Why can't it set a width?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Code:
    <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
    Code:
    <!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>
    Last edited by bullant; 04-12-2011 at 08:06 AM.

  • Users who have thanked bullant for this post:

    impresently (04-13-2011)

  • #4
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <!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>


  •  

    Tags for this Thread

    Posting Permissions

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