Jump to content

Layout With <div> Tags


styphon

Recommended Posts

I noticed that your .container class has a width of 9000px. I don't think that's what you wanted. You could just get rid of the width attribute altogether, then it will expand to the entire width of its parent. You can also probably get rid of the margin: 0 auto from your .container class since it won't really do anything if the div is as wide as it's container.

Link to comment
Share on other sites

I noticed that your .container class has a width of 9000px. I don't think that's what you wanted. You could just get rid of the width attribute altogether, then it will expand to the entire width of its parent. You can also probably get rid of the margin: 0 auto from your .container class since it won't really do anything if the div is as wide as it's container.
Thanks for noticing that. It needs margin: 0 auto because the div's inside .container (.whiteLeft, whiteMain and whiteRight) need to be centred. It also needs the width: 900px because it has no parent. It's the parent for the white box and everything in it.EDIT: Wow, that solved it. That was my problem, well half of it. Changing it from 9000px to 900px has centred the white box, almost. It's sitting where the .whiteLeft should be sitting. All I need now is to get .whiteLeft, .whiteMain and .whiteRight next to each other instead of on top of each other and figure out why the Button Bar isn't showing the background image except for where it's padded.EDIT 2: I've played around a little bit and I found that if I put an empty paragraph (<p></p>) in the html code of the .whiteLeft div then the div displayed with the background image covering the space. Unfortunately my FTP has gone down and I can't upload the changes for you to see what I mean.EDIT 3: I've played around some more and by setting a minimum height of 300px I've actually got it lined up and displaying properly, except the .whiteBottom is either not there or is under the .container (I suspect the latter). Also, by adding a padding of 30px to the bottom of .buttonBar I've got that to display correctly. Although I don't know why I had to pad it to get the background image to display. I suspect it's because the .button sections are floating.
Link to comment
Share on other sites

Thanks for noticing that. It needs margin: 0 auto because the div's inside .container (.whiteLeft, whiteMain and whiteRight) need to be centred. It also needs the width: 900px because it has no parent. It's the parent for the white box and everything in it.
Yep, I forgot about the floats! :)
EDIT 2: I've played around a little bit and I found that if I put an empty paragraph (<p></p>) in the html code of the .whiteLeft div then the div displayed with the background image covering the space.
What exactly is the purpose of those whiteLeft and whiteRight divs, anyway? If I've got my facts straight, all they're being used for is round corners on a white rectangle right? So, why couldn't you just make a new image with round corners for the whiteMain and get rid of whiteLeft and whiteRight? That would save the hassle of trying to align three separate divs. You could also get rid of the container and just put a width and margin on whiteMain.
Link to comment
Share on other sites

What exactly is the purpose of those whiteLeft and whiteRight divs, anyway? If I've got my facts straight, all they're being used for is round corners on a white rectangle right? So, why couldn't you just make a new image with round corners for the whiteMain and get rid of whiteLeft and whiteRight? That would save the hassle of trying to align three separate divs. You could also get rid of the container and just put a width and margin on whiteMain.
No, whiteTop and whiteBottom do the round edges. whiteLeft and whiteRight are there for the gradient from black to white: white-left.pngI'm also trying to learn how to set three divs next to each other as I'll probably add extra's to the site at a later date, such as a column on the right for server and match details.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...