Jax2 Posted April 12, 2010 Share Posted April 12, 2010 Hi guys, I have 3 divs set up on my site currently: Container, square and answer .... Container, of course, is the main body with a 95% width, auto margin, leaving a nice small section of background. Square is a 100x100 square with a graphic behind the text. Answer is a 600x100 rectangle with a graphic behind it. So far, so good. Now, I created answer h1 and answer h2, one of them is an 18% top margin with size 22 text which says: Question: and the other is a size 18 with 22% top margin which states the title of a question a user asked. Both are set to float: left and work fine. What I am trying to do now and failing at, is to get the body of the question to show up underneath the <h1> and <h2> tags inside the <div id="answer"> tags. If I just type in the question body (Haven't set up the php yet) it shows up to the right of the <h1> and <h2> tags, as well as below them if it's long. I'd like it to be BELOW them. Here is my current code that isn't working, perhaps you could help me figure this out? <head> <title>Questions & Answers</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body class="qanda"> <div id="container"> <div align="center"><h3>Answers</h3></div> <div id="square"> <h1>User: Jax2<h1> </div> <div id="answer"> <h1>Question: </h1> <h2>What is the speed of light?</h2> <div id="question"> I would like to know what the speed of light is. I need to know this for a science class question that is coming up in the next few days. Please answer. I am making this long on purpose so I can see how it looks inside the background image. </div><!-- END QUESTION--> </div> </div> LOL! Ignore the question, it was just done to make sure it would all fit inside the answer background image ... Stupid, I know. Here is the css if it helps: body { font: 100% Verdana, Arial, Helvetica, sans-serif; background: #000000; background-image:url('images/background.gif'); margin: 0; padding: 0; text-align: center; } .qanda #container { margin: 0 auto; width: 95%; border: 1px solid #000000; background: #FFFFFF; height: 100%; } .qanda #square { width:100px; height: 100px; background-image:url('images/square.gif'); float: left; background-position: center; margin: 0px 0px 0px 3px; } .qanda #square h1 { margin: 18px; font-size: 12; } .qanda #answer { width:600px; height: 100px; background-image:url('images/questionBG.gif'); float: left; } .qanda #answer h1 { margin: 18px; font-size: 22; float: left; } .qanda #answer h2 { margin: 22px; font-size: 18; float: left; } #question { font-size: 12; text-align: left; } The question tag is only to set the height and alignment right now, I'm not sure what else I need to do with it to get it underneath the <h1><h2> tags. I know I can use a top margin, but if the question title goes onto the second line, it will screw everything up. Looking forward to any suggestions. Thanks! Quote Link to comment Share on other sites More sharing options...
haku Posted April 12, 2010 Share Posted April 12, 2010 I didn't read through too carefully, but I think your problem can be solved with: h1, h2 { clear:left; } Quote Link to comment Share on other sites More sharing options...
nano Posted April 12, 2010 Share Posted April 12, 2010 That's a lot of float But haku is right, if you are floating divs, having them next to each other and you want to have another div on another line, simply clear the floats.. #question { clear:both; } You can clear left, right or both.. Hope that's what you were looking for. Cheers Quote Link to comment Share on other sites More sharing options...
Jax2 Posted April 12, 2010 Author Share Posted April 12, 2010 That worked perfectly, thank you both. I agree, 100% that it's an awful lot of floats, and I haven't even tried putting two of these in a row, let alone 10 like it will have in the end, so I'm not sure how that will look. Is there a better way I could achieve the look I want? Here is how it looks now: That is pretty much exactly what I want to achieve ... as I said, I'm going to have one set of these for every question asked, so there will be more below the current one ... Am I looking at a massive headache? Quote Link to comment Share on other sites More sharing options...
Jax2 Posted April 12, 2010 Author Share Posted April 12, 2010 ignore - had a different problem, but solved it ... lol ... still waiting to hear back about the above though ... Quote Link to comment Share on other sites More sharing options...
haku Posted April 13, 2010 Share Posted April 13, 2010 Nothing wrong with lots of floats. There is even the FNE method that some people use (Float Nearly Everything). Don't worry about it. If it's working, you have no problems. Quote Link to comment Share on other sites More sharing options...
Jax2 Posted April 13, 2010 Author Share Posted April 13, 2010 I appreciate the advice ... I'm brand new to css, pretty much everything I've ever done has been with tables, but I couldn't get the images aligned properly inside of tables, so ... css to the rescue. Suppose I had to learn it some time. Quote Link to comment Share on other sites More sharing options...
haku Posted April 13, 2010 Share Posted April 13, 2010 The basics are really quite easy actually. You can pick them up in a week or two of playing around. It's when you start to layout sites that it gets difficult. Come back here if you have any more questions. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.