www.webdeveloper.com
Results 1 to 2 of 2

Thread: Trouble aligning multiple DIVs Horizontally

  1. #1
    Join Date
    Nov 2009
    Posts
    1

    Trouble aligning multiple DIVs Horizontally

    please help me with the following. This is not a problem in Firefox; only in IE. I am having trouble centering one DIV with a DIV to the left of the centered DIV. The DIV that is blue I would like centered according to the browser width and the red DIV I would like the same vertically as the blue DIV only left justified. In Firefox this works correctly the way I would expect. In IE the left justified div appears "pushes" the DIV ( in blue ) that I want centered further to the right; making the DIV I want centered un-centered. thanks for any assistance.

    Code:
    <div width="100%">
    			<div align = "left" style="width:200px;float:left;background-color:#ff0000;">
    						<p style="font-size: 8pt;">This needs to be left justified........</p>
    						<p style="font-size: 8pt;">This needs to be left justified........</p>
    						<p style="font-size: 8pt;">This needs to be left justified........</p>
    			</div>
    		 <div align="center" style="background-color:#00ff00;">
    				<div style="width: 500px;background-color:#0000ff;">
    					<p style="font-size: 8pt;">this needs to be centered.................................................................................. </p>
    					<p style="font-size: 8pt;">this needs to be centered.................................................................................. </p>
    					<p style="font-size: 8pt;">this needs to be centered.................................................................................. </p>
    					<p style="font-size: 8pt;">this needs to be centered </p>
    				</div>
    		</div>

  2. #2
    Join Date
    Nov 2009
    Posts
    24
    You need to add margin-left:200px; to the center block...

    Code:
    <div width="100%">
    	<div align="left" style="width:200px; float:left; background-color:#ff0000;">
    		<p style="font-size: 8pt;">This needs to be left justified........</p>
    		<p style="font-size: 8pt;">This needs to be left justified........</p>
    		<p style="font-size: 8pt;">This needs to be left justified........</p>
    	</div>
    	<div align="center" style="background-color:#00ff00; margin-left:200px;">
    		<div style="width:500px; background-color:#0000ff;">
    			<p style="font-size: 8pt;">this needs to be centered.................................................................................. </p>
    			<p style="font-size: 8pt;">this needs to be centered.................................................................................. </p>
    			<p style="font-size: 8pt;">this needs to be centered.................................................................................. </p>
    			<p style="font-size: 8pt;">this needs to be centered </p>
    		</div>
    	</div>
    </div>

Thread Information

Users Browsing this Thread

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

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
  •  
HTML5 Development Center



Recent Articles