Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Css and Divs 1

Status
Not open for further replies.
biglurch

biglurch

Programmer
Aug 25, 2005
35
US
I am trying to align three divs and i am completely stuck on how to start it. I am going to attempt a basic design below:


|-----------------|-------------|
|div 1 | |
|-----------------| |
| | |
| div2 | div3 |
| | |
|-----------------|-------------|


Hopefully that will help you get an idea. My plan was to make one div surround all of this to cender it and float div3 to make it align on the side of the div1 and div2. As shown below:

<div align="center>
<div id="div1">
</div>
<div id="div2>
</div>
<div id="div3" style"float: left; position: inherit;">
</div>
</div

Is this even close or possible? When i test it the div3 just aligns below and off of the page. so i thought making div1 enclose div2 would help but because it contains an image it messes up.

If you cant understand any of this let me know i will try to explain better, or any links that may help with alignment will be appreciated.


Live by the code, Die by the code!!
 
Sort by date Sort by votes
Wrap Div 1 and Div 2 in another div anf loat left, then also float left div 3.

Make sure there is enough space to fit Div3 or it will wrap under the other 2 divs.

Code: 
<div id="Container" style="border:solid 2px black; height:600px; width:800px;">

	<div id="leftdivs" style="float:left; border:1px solid grey; width:50%; 

background-color:#88AACC; height:100%">

	<div id="one" style="border:solid 2px red; height:50%; width:100%;">
		Div 1
		</div>

		<div id="two" style="border:solid 2px green; height:50%; width:100%;">
		Div 2
		</div>
	
	</div>

	<div id="three" style="float:left; border:solid 2px blue; width:48%; 

height:100%;">
	div 3
	</div>

</div>

The borders are just there to give you an idea of where the divs are. (very usefull) and Remeber divs without specific sizes don't only expand to fit the content in them.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
This is another example how to accomplish the layout you're asking for -works in different browsers.

Code: 
<html>
<head>
  <title>Floating DIVs - an example</title>
  <style type="text/css">
    body {
      /* center main_div on the page in IE : */
      text-align        : center;             
    }
    #main_div {
      /* center main_div in firefox, nn, opera : */
      margin            : 0 auto 0 auto;
      width             : 700px;
    }
    #my_div1 {
      width             : 200px;
      height            : 50px;
      float             : left;
      text-align        : left;
      background-color  : red;
    }
    #my_div2 {
      width             : 200px;
      height            : 250px;
      float             : left;
      text-align        : left;
      background-color  : green;
    }
    #my_div3 {
      width             : 500px;
      height            : 300px;
      float             : right;
      text-align        : left;
      background-color  : blue;
    }
  </style>
</head>
<body>
  <div id="main_div">
    <div id="my_div1">
      my_div1
    </div>
    <div id="my_div3">
      my_div3
    </div>
    <div id="my_div2">
      my_div2
    </div>
  </div>
</body>
</html>

I've added background colors just to see where the div are.

Note: The properties [tt]width[/tt] and [tt]border[/tt] combined interprets different in different browsers... which should be taken in consideration when laying out your disign.

IE:

A div with with = 100px and border = 1px would be 100px on the outside and 100-2px=98px on the inside.

... where as

FireFox (and NN, Opera etc):

A div with with = 100px and border = 1px would be 102px on the outside and 100px on the inside.

Regards
 
Upvote 0 Downvote
dkdude, inclusion of a complete and valid doctype forces IE to adapt to the standard way that other browsers are already using and there's no more problems with the box model.

Very good example though. I would've gone the same way.
 
Upvote 0 Downvote
Thanks Vragabond,

And I absolutely agree. It should. But if I use this doctype:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

and modify main_div like this:

Code: 
    #main_div {
      /* center main_div in firefox, nn, opera : */
      margin            : 0 auto 0 auto;
      width             : 700px;
	border            : solid 10px #000000;
    }

IE will screw up the flow. Anoying, huh :)

Please check my doctype -it should be complete valid?

Thanks
 
Upvote 0 Downvote
It produces just about the same result (except that IE puts the #main_div around all the floated elements and FF keeps it at zero height) for me. What version of IE are you using and do you have anything but whitespace before the doctype? That could throw off IE, but if it is not that, IE6 should render fine.
 
Upvote 0 Downvote
Hmmm... strange. No before doctype I only have

Code: 
<?xml version="1.0"?>

Could that be the reason? (don't have time to test it right now, sorry)

I get the same thing you describe with FF. I use IE 6.0 ... quite odd :-(

Anyways -not a big issue in this thread. I know how to handle layout issues to get around the cross browser compatability issues.

Thanks again

Regards
 
Upvote 0 Downvote
Yup, the xml declaration, besides the fact that it is not needed at all, throws IE back into quirks mode and completely ignores the doctype. It's just one of IE's lovely little annoyances.
 
Upvote 0 Downvote
wow thank you guys very much for the help makes a ton more sense now. Really appreciate the help.

Live by the code, Die by the code!!
 
Upvote 0 Downvote
Thanks Vragabond, this is very useful information for me!

Have a star :)
 
Upvote 0 Downvote
because of the float element in the divs, the div for my footer now goes underneath the 3 div block i just added. Any ideas on how to make the footer div stay below the new divs?


Live by the code, Die by the code!!
 
Upvote 0 Downvote
this is in firefox btw ie renders it the way it should

Live by the code, Die by the code!!
 
Upvote 0 Downvote
Got it to work needed to add a div underneath the div 3 that had clear: both; . Thanks again for your help.

Live by the code, Die by the code!!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
788
spamjim
spamjim
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
466
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
409
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
326
PeDa
PeDa
tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
360
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top