Hi there, I am trying to make a box and put contents inside of it. For some reason the box displays as I would like but the contents intended to be in the box appear below the box. If anyone could help, that would be great. HTML <p class="box"> <p class="contents"> Contents </p> <img src="images/house.bmp"> Add a picture in the box </p> Code (markup): CSS .box { width:700px; height:150px; border:solid 1px #000000; } .contents { height:auto; border-bottom:solid 1px #000000; } Code (markup): The reason for the solid border in the contents is because I want this part to be a title within the box. Once I get that worked out i'll re-organise what is in the box. My main problem is getting things inside the box. I will also be re-using the box, this is the reason I didn't make it a DIV. Thanks in advance
I don't fully understand this, you can re use a DIV, after all a DIV is meant to be your multi-purpose block element. You should only really use <p> for paragraphs, from a semantic point of view of course. Anyway there is no real reason to set height:auto; here on the .contents. Also are the contents larger than 150px, because you've defined this as the height for the .box? Don't forget elements will automatically expand to fit their contents, without setting a height on them. A height restricts the element to that height.
If you have a bunch of <div id="box"> in your html, wont this give you invalid html as you can only use the same div element once? Or is there a way around this?
HTML Vaildator doesn't seem to agree. If I use <div id="header"> twice I get this from http://validator.w3.org
You can reuse a DIV but not an ID which must be UNIQUE per page. The reason your original code you posted above doesn't work is, you are nesting p's. That you cannot do. P's are blocks and they are only allowed to hold inlines such as anonymous text, anchors, images, spans, etc. So this is what the browser did for your invalid code (because remember in HTML4 and earlier you didn't have to close your p's? This is because if you didn't close them, the browser would do it for you): <p class="box"> [b]</p> closed by the browser because you opened another p[/b] <p class="contents"> Contents </p> [b]this image and text are not inside any elements, but are loose![/b] <img src="images/house.bmp"> Add a picture in the box [b]end loose inlines[/b] </p>[b]browser doesn't know what to do with this one, it thinks there's just this random closing tag with no opener, because it won't let you nest p's[/b] Code (markup): To solve the div id="box" dilemma, this is what classes were invented for: div class="box" the point being, that all the divs with the class of "box" will have the same properties. If they are not supposed to share the same properties, well, that's when you use an id, because you are trying to make that div (or whatever element) unique. How many web pages have more than one header? They're usually given an id of "header" because it's unique: the only header div on the whole page. Having two of them with the same name makes you no better than George Foreman. He named all his kids George. So how do you target just one specific kid? You can also mix-n-match: <div id="box" class="foo bar"> stuff </div> if necessary. You can say all boxes with the class of "foo" get some styles, but that if they also get the class of "bar" they have some other styles too, and then that the #box is special and has also his own styles or even overrides some of the styles listed for the classes (because an id is worth more than a class when counting specificity).
Thanks guys. Some great suggestions in there! I have pretty much sorted out most of the formatting. There is one glitch in firefox (although it is probably formatting correctly in forefox, the problem is more likely with IE8). I'll no doubt be asking more questions soon once I can post my revised code.