Jump to content

Getting divs in the right place ...


Recommended Posts

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 ... :P 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!

 

Link to comment
https://forums.phpfreaks.com/topic/198250-getting-divs-in-the-right-place/
Share on other sites

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

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:

 

show.gif

 

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?

 

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.