Need a new web host or having a problem with a script? Tips and advice on the best way to design, build and maintain your most valuable asset - your website!

Problems with Divs within Divs - How do I do this?

tcampbell
Posts: 19
Joined: 14 Apr 07
Trust:

Problems with Divs within Divs - How do I do this?

Image

I have a 3 column layout that looks like fig 1 in the pic.

when i try to wrap the center div around the right div, it looks like fig 2

How do i get my layout to look like fig 3?


here is the css for the center and right divs in fig 1. (To get fig 2 i basically added a container div and changed the right div's float to right)
Code: Select all

#center{
   float:left;
   left:0px;
   margin-left:20px;
   width:51%;
}

#right{
   float:left;
   font-size:11px;
   width:21%;
   margin-left:14px;
}

  • 0
Site Admin
markling
Posts: 2488
Joined: 13 Jun 06
Trust:
So your problem with figure 2 is that the text is running over the box on the right? Without seeing your HTML (in addition to the CSS) it's hard to say what's going wrong, so here's a way to do it. Tweak it so that it looks how you want.

Code: Select all
.divleft {width: 20%; float: left;}   
.divcenter {width: 78%; float: right;}            
.divright {width: 30%; float: right;}


Then your html should look like this:

Code: Select all
<div class="divleft">This is the left column</div>
<div class="divcenter">
    <div class="divright">This is the right content. It needs to sit inside the "center" div, but floated to the right so that the center content will wrap around it.</div>

And here is the content for the center div, which should wrap around the content on the right.
</div>


It'll look pretty nasty until you put some padding and/or margins onto those divs.

Good luck!
Mark
  • 0
Limited time special - Try Affilorama Premium for just $1 for 7 days: http://www.affilorama.com/premium
 
tcampbell
Posts: 19
Joined: 14 Apr 07
Trust:
Thanks Mark for the quick reply,

I should also have mentioned before that there is a div class inside the center div like this...

Code: Select all
<div id="center>

<div id="right"><everything on the right></div>

<div class="post"><post content" is here></div>

</div>


the content from everything in the center div wraps around the right div, but the css properties don't, so that the header borders, and background color continue into the right div. Also, the right div seems to have inherited all the css properties of the center...

Here are the 'post' properties:

Code: Select all
.post {
   background-color:#f8f8f8;
   padding:10px;
   padding-top:1px;
   display:block;
}


Any ideas? If I excluded anything that might help, I can post that also.

Thanks for your help,
  • 0
Site Admin
markling
Posts: 2488
Joined: 13 Jun 06
Trust:
It's pretty hard to see what the problem is without looking at your whole page. If you want different borders, headers, font styles, background colours etc within that right div, you need to specify them. Otherwise, even though they're in another div, because they're headers, borders and font styles within the center div, they're going to inherit the properties of the center div.

Basically, if you don't tell it to do something different, it'll keep doing the same thing for *everything* inside the div.

So in your stylesheet you should also have:

Code: Select all
#right h1 {style for header}
#right p {style for paragraph}


Or if you're just putting stuff inside the "post" class, specify the headers and stuff for that.

Code: Select all
.post h1 {style for header}
.post p {style for paragraph}



P.S. You don't need to specify "block" for a div. It's a block level element already.

Hope that helps,
Mark
  • 0
Limited time special - Try Affilorama Premium for just $1 for 7 days: http://www.affilorama.com/premium
 
tcampbell
Posts: 19
Joined: 14 Apr 07
Trust:
You are right, Mark, it is a little fuzzy without an example, sorry about that.

thediscussionplace.com/example

that is a link to the basic template. The link inside shows what it looks like with the div within the div.




Thanks for your help,

Terrance
  • 0
Last edited by ampie g on 22 Jan 10 3:03 am, edited 1 time in total.
Reason: removed http as URL used for illustration purposes and not an actual link
 

Site Admin
markling
Posts: 2488
Joined: 13 Jun 06
Trust:
Ok, here's your problem.

Code: Select all
#middle h1, #right h1, #left h1 {
   font-size:17px;
   font-family:georgia, arial, georgia, times, sans-serif;
   border-bottom:1px solid #c4c4c4;
   font-weight:normal;
}


This is saying that all h1 tags in your left, middle and right divs will be that style, complete with bottom border.

If you want your other divs to be different, you need to delete the "#right h1, #left h1" parts in the above style, and create new ones for that div.

#right h1 {things here}

Hope that helps,
Mark
  • 0
Limited time special - Try Affilorama Premium for just $1 for 7 days: http://www.affilorama.com/premium