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: 15
Joined: 14 Apr 07
Trust:

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

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)
  • 0
Site Admin
markling
Posts: 2071
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.



Then your html should look like this:



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

Good luck!
Mark
  • 0
Limited time special - Pathway to Passive for $37: https://www.affilorama.com/pathwaytopassive
 
tcampbell
Posts: 15
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...



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:



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

Thanks for your help,
  • 0
Site Admin
markling
Posts: 2071
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:



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




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 - Pathway to Passive for $37: https://www.affilorama.com/pathwaytopassive
 
tcampbell
Posts: 15
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: 2071
Joined: 13 Jun 06
Trust:
Ok, here's your problem.



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 - Pathway to Passive for $37: https://www.affilorama.com/pathwaytopassive