Two Divs Hating On The Third Div

L

lenglain

New Member
Hi I had issues with a navbar, some of you guys were kind enough to give me some tips which helped me find a solution so thanks a lot.

Now I'm running into a problem with a div box that needs to contain three divs side by side. I've executed the same principle in the past, but for some reason it's giving me problems in this exact scenario.

the first div goes in the box fine but the second div will only show below the box, I can't get it to go in, here are the images and code:


IMAGE:
4904663741_838be16c1a_b.jpg

​


CODE:





========="Index.php"=============





HTML: 
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<div id="topheader">
   <div id="logo"></div> 
   <ul id="nav">
       <li id="nav-home"><a href="#">Who Are We?</a></li>
       <li id="nav-about"><a href="#">Our Work</a></li>
       <li id="nav-archive"><a href="#">Positions</a></li>
       <li id="nav-lab"><a href="#">Reports</a></li>
       <li id="nav-reviews"><a href="#">Press</a></li>
       <li id="nav-contact"><a href="#">Contact</a></li>
   </ul>
</div>
<div id="topbox">
   <div id="welcome">
      <div id="post-<?php the_ID(); ?>">
         <h2><a href="#" rel="bookmark" title="Permanent Link to">Text</a></h2>
	 <div class="entry">
	    <?php the_content('Read More'); ?>
	 </div>
         <h2 class="center">Not Found</h2>
	 <p class="center">Sorry, but you are looking for something that isn't here.</p>
      </div>
   </div>
   <div id="toppic">
      <div id="post-<?php the_ID(); ?>">
         <div class="entry2">
	    <?php the_content('Read More'); ?>
	 </div>
      </div>
   </div>
</div>





============CSS================






Code: 
#topbox {
background:url(images/topbox.jpg) no-repeat;
height:193px;
width:763px;
margin: 10px auto;
border: 1px solid #00FF00;
text-align:left;
z-index:100;
}


#welcome {
border: 1px solid #FF0000;
height:193px;
width:260px;
margin-left:0px;
}

#welcome h2 {
margin: 0px 0 0;
font-size:17px;
text-align:left;
width: 260px;
border: 1px solid #0000FF;
}

#welcome .entry{
font-size:14px;
text-align:left;
}


#toppic {
margin-top:0px;
margin-left:290px;
border: solid 1px #FF00FF;
height:193px;
width: 200px;
position:absolute;
z-index:101;
}
 
Last edited by a moderator:
PixelPusher

PixelPusher

Super Moderator
Staff member
Ok here are a few issues:

  1. In order for "z-index" to function you MUST specify a position other than "static" (default)
  2. The div "toppic" (#4) will not sit inside the main top div "topbox" because of the absolute positioning (AP).
  3. I suggest you look into using positioning correctly, try w3schools or even look at my sticky post about "positioning" in this forum

That being said, here's how to fix the problem...

Solution(s):
  1. Use floats for the divs inside of "topbox" or...
  2. Set the position of "topbox" to relative so the AP of "toppic" will register correctly.

CSS for Solution 1: Floats
Recommended solution
Code: 
div#topbox {
overflow:hidden; /* ALLOWS DIV TO EXPAND WITH FLOATED CONTENT */
background:url(images/topbox.jpg) no-repeat;
height:193px;
width:763px;
margin: 10px auto;
border: 1px solid #00FF00;
}
div#welcome, div#toppic {
float:left;
height:193px;
margin:0;
}
div#welcome {
border: 1px solid #FF0000;
width:260px;
}
div#toppic {
margin-left: 30px;
border: solid 1px #FF00FF;
width: 200px;
}

CSS for Solution 2: Positioning
Code: 
div#topbox {
position:realtive; /* ALLOWS CHILD POSITIONS TO REGISTER CORRECTLY */
background:url(images/topbox.jpg) no-repeat;
height:193px;
width:763px;
margin: 10px auto;
border: 1px solid #00FF00;
}
div#welcome, div#toppic {
position:relative;
height:193px;
margin:0;
}
div#welcome {
border: 1px solid #FF0000;
width:260px;
}
div#toppic {
position:absolute;
top:0;
left:290px;
border: solid 1px #FF00FF;
width: 200px;
}

Good luck, let me know if you have any questions.
 
L

lenglain

New Member
You are a Champion! Your solution worked perfectly, in both Firefox and IE I'm a noob so I had no idea about floats and their purpose, I still don't, but I will look into it now.

If you send me your info I'll send you $5 via Paypal :)
 
L

lenglain

New Member
Actually I'm sorry, the error is fixed, but now that I want to add a third div in the box I get the same exact problem?! in the index.php I copied and pasted the toppic div and named it toppic2 and added it the the main div, and in the css I copied and pasted all the attributes for toppic and named it toppic2, it's the exact same code but it doesn't work for some reason, the third div "toppic2" just hangs below the main div "topbox"
 
PixelPusher

PixelPusher

Super Moderator
Staff member
lenglain said:
Actually I'm sorry, the error is fixed, but now that I want to add a third div in the box I get the same exact problem?! ...
Click to expand...

It will work if you used the floating method and not the absolute position method (well AP method will work but will require more code). So if you want to add another div called "toppic2" it would look like this:

Code: 
div#topbox {
overflow:hidden; /* ALLOWS DIV TO EXPAND WITH FLOATED CONTENT */
background:url(images/topbox.jpg) no-repeat;
height:193px;
width:763px;
margin: 10px auto;
border: 1px solid #00FF00;
}
div#welcome, div#toppic, div#toppic2 {
float:left;
height:193px;
margin:0;
}
div#welcome {
border: 1px solid #FF0000;
width:260px;
}
div#toppic, div#toppic2 {   
/* ADD TOPPIC2 HERE IS YOU WANT IT TO BE THE SAME AS TOPPIC */
margin-left: 30px;
border: solid 1px #FF00FF;
width: 200px;
}
div#toppic2 {
/* IF YOU WANT TOPPIC2 TO BE DIFFERENT, AND DIFF STYLES HERE */
}

HTML: 
<div id="topbox">
   <div id="welcome">...</div>
   <div id="toppic">...</div>
   <div id="toppic2">...</div>
</div>

IMPORTANT NOTE:
Remember, when using css, the code is cascading (hence the name: Cascading Style Sheets).
What does this mean?
Styles sheets are read top to bottom; it cascades down. So you can define a style early in a doc for many items but then change it for only one of them further down the doc.

For example:
When I define a style for all three items (i.e div#welcome, div#toppic, div#toppic2) the dom reads this and says ok all three of these items get a float left, no margins, and a height of 193px.

Now you can still add other styles specifically to a single element after this, hence why I have a later style (div#toppic). This now adds extra styles to this item only. So it has the float, but the margin is now set to have 30px on the left. See what I mean?

Its easy [and powerful] stuff once you grasp the concept.
 
L

lenglain

New Member
Hey PixelPusher thanks for the help, I tried to use the code you provided 'as is' but it's not working so I'm going to try to mess around to see if I can make it work, if not, then you'll be hearing from me soon!
 
L

lenglain

New Member
No unfortunately I'm running it locally on my computer, uploading it only once I'm done, sorry. I'm surprised I'm having so much trouble with positioning Divs! I used to just do margin left/right/top/bottom to position them but this is the first time I've decided to use wrapper divs that are centered for me to then put divs inside of them - and it's leading to all sorts of shenanigans.
 
L

lenglain

New Member
What I'm basically trying to achieve is three rectangles arranged vertically, each of them containing three divs arranged horizontally:

4924391348_a27ef188e8_b.jpg


So simple but I simply can't wrap my head around why all these kinks come about, I've been having a much easier time learning how to make Flash sites!
 
PixelPusher

PixelPusher

Super Moderator
Staff member
No worries lenglain this layout is quite simple. It is a perfect example for using floats. I might even make a sticky from this :D

I will write something up for you real quick.
 
PixelPusher

PixelPusher

Super Moderator
Staff member
K here it is.
You may want to make slight tweaks here and there but the structure is solid.
Notice how I target many elements through the use on only one class name. This keeps you markup very clean.

HTML
HTML: 
<div class="container">
	<div>
    	<h2>Heading One</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nunc lacus. Integer bibendum varius fringilla. Suspendisse potenti. Donec nec tincidunt tellus. Curabitur fringilla viverra placerat. Sed quis turpis nunc.</p>
        <a href="">Read more &rarr;</a>
    </div>
    <div>
    	<h2>Heading Two</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nunc lacus. Integer bibendum varius fringilla. Suspendisse potenti. Donec nec tincidunt tellus. Curabitur fringilla viverra placerat. Sed quis turpis nunc.</p>
        <a href="">Read more &rarr;</a>
    </div>
    <div>
    	<h2>Heading Three</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nunc lacus. Integer bibendum varius fringilla. Suspendisse potenti. Donec nec tincidunt tellus. Curabitur fringilla viverra placerat. Sed quis turpis nunc.</p>
        <a href="">Read more &rarr;</a>
    </div>
</div>
<div class="container">
	<div>
    	<h2>Heading One</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nunc lacus. Integer bibendum varius fringilla. Suspendisse potenti. Donec nec tincidunt tellus. Curabitur fringilla viverra placerat. Sed quis turpis nunc.</p>
        <a href="">Read more &rarr;</a>
    </div>
    <div>
    	<h2>Heading Two</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nunc lacus. Integer bibendum varius fringilla. Suspendisse potenti. Donec nec tincidunt tellus. Curabitur fringilla viverra placerat. Sed quis turpis nunc.</p>
        <a href="">Read more &rarr;</a>
    </div>
    <div>
    	<h2>Heading Three</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nunc lacus. Integer bibendum varius fringilla. Suspendisse potenti. Donec nec tincidunt tellus. Curabitur fringilla viverra placerat. Sed quis turpis nunc.</p>
        <a href="">Read more &rarr;</a>
    </div>
</div>
<div class="container">
	<div>
    	<h2>Heading One</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nunc lacus. Integer bibendum varius fringilla. Suspendisse potenti. Donec nec tincidunt tellus. Curabitur fringilla viverra placerat. Sed quis turpis nunc.</p>
        <a href="">Read more &rarr;</a>
    </div>
    <div>
    	<h2>Heading Two</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nunc lacus. Integer bibendum varius fringilla. Suspendisse potenti. Donec nec tincidunt tellus. Curabitur fringilla viverra placerat. Sed quis turpis nunc.</p>
        <a href="">Read more &rarr;</a>
    </div>
    <div>
    	<h2>Heading Three</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nunc lacus. Integer bibendum varius fringilla. Suspendisse potenti. Donec nec tincidunt tellus. Curabitur fringilla viverra placerat. Sed quis turpis nunc.</p>
        <a href="">Read more &rarr;</a>
    </div>
</div>

CSS
Code: 
div.container {
	margin:20px auto;
	border:solid 1px #ccc;
	width:790px;
	overflow:hidden;
	position:relative;
}
div.container div {
	float:left;
	margin:1px 0 1px 1px;
	border:solid 1px #069;
	width:260px;
	height:193px;
}
div.container h2, div.container p, div.container a {
	font-family:Arial, Helvetica, sans-serif;
	font-size:8pt;
	color:#444;
	padding:0 10px;
}
div.container h2 {
	font-size:10pt;
	line-height:25px;
}
div.container p {
	line-height:15pt;
}
div.container a {
	display:inline-block;
	line-height:17pt;
	color:#C60;
	text-decoration:none;
}
div.container a:hover {
	text-decoration:underline;
}

Let me know if you need help understanding it.
 
L

lenglain

New Member
Hey Thanks PP, I just got back from my bartending job and will now stay up all night figuring everything out, I'll let you know how I managed.
 
You must log in or register to reply here.
Top