Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 320
  • Last Modified:

Help with Div Layout

I'm having trouble with a simple Div layout. Below is my current code. I've also attached an image (sample_layout.jpg) I'm trying to achieve. My current code doesn't work right.


<div id="wrapper" style="width:900px;border:1px solid black;">
	<div id="header" style="float:left;background:#cccccc;width:600px;height:100px"><h1>Title</h1></div>
	<div id="utils" style="float:right;text-align:right;background:#eeeeee;width:200px;height:100px">Help</div>
	<div id="content" style="background:#666666">
		Main Content Content
	</div>
</div>

Open in new window

sample-layout.jpg
0
greddin
Asked:
greddin
  • 2
2 Solutions
 
Paul JacksonCommented:
try :

   <div id="wrapper" style="width:900px;border:1px solid black;"> 
   <div id="headerwrapper" style="width:100%;height:100px">
        <div id="header" 
            style="float:left;background:#cccccc;width:700px; height:100px"><h1>Title</h1></div> 
        <div id="utils" style="float:right;text-align:right;background:#eeeeee;width:200px;height:100px"><h1>Help</h1></div> 
   </div>
   <div id="content" style="background:#666666;height:500px"> 
                <h1>Main Content</h1>
   </div> 
</div> 

Open in new window

0
 
meb_santosoCommented:
If you are trying to achieve this:

 screen caps
Try this code: (change the colors and the border, it's only for cosmetics )

<div id="wrapper" style="width:900px;border:5px solid #FF0;">
	<div id="header" style="float:left;background:#00F;width:600px;height:100px">
    	<h1>Title</h1>
    </div>
	<div id="utils" style="float:right;text-align:right;background:#0F0;width:200px;height:100px">
    	Help
    </div>
    <div style="clear:both;"></div>
	<div id="content" style="background:#F00">
		Main Content Content
	</div>
</div>

Open in new window


What's forgotten from time to time is the following:
<div style="clear:both;"></div>

Open in new window

0
 
Paul JacksonCommented:
Update without the header wrapper div which wasn't really needed:
   <div id="wrapper" style="width:900px;border:1px solid black;"> 
        <div id="header" 
            style="float:left;background:#cccccc;width:700px; height:100px"><h1>Title</h1></div> 
        <div id="utils" style="float:right;text-align:right;background:#eeeeee;width:200px;height:100px"><h1>Help</h1></div> 
   <div id="content" style="background:#666666;height:500px"> 
                <h1>Main Content</h1>
   </div> 
</div>

Open in new window

0
 
greddinAuthor Commented:
Thanks guys for the the layouts. Both are actually just what I needed. I couldn't decide which to choose so I split the points.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now