PDA

View Full Version : Nested DIV tag alignment: ISSUE



weasel512
Jun 21st, 2009, 12:03 PM
I have two div tags, nested within another container div tag.

I know that this may be a simple problem, however i am unable to align the two side by side.

the code is as follows:



<div id="Container">

<div id="Ingredients">
<!-- List of ingredients is contained here -->
</div>

<div id="Instructions">
<!-- Instructions for recipe goes here -->
</div>

</div>

I've tried using float:left/float:right for each, and neither seems to work.

All help would be appreciated.

lordmeka
Jun 21st, 2009, 12:54 PM
Im not an expert but try this.


<style>

#Ingredients,#Instructions {
float: left;
padding: 2 2 0 0
}

</style>

do you have any style rules for the #container?

The PHP Guy
Jun 21st, 2009, 12:56 PM
<div> is a block element, which means that it takes up all the horizontal space available and does not let anything else next to it.

So, you'll have to use tables instead:



<div id="Container">
<table border="0">
<tr>
<td>
<div id="Ingredients">
<!-- List of ingredients is contained here -->
</div>
</td>
<td>
<div id="Instructions">
<!-- Instructions for recipe goes here -->
</div>
</td>
</tr>
</div>

abduraooft
Jun 21st, 2009, 01:57 PM
I've tried using float:left/float:right for each, and neither seems to work. float:left; should work if used properly. Could you post your complete code including DOCTYPE?

So, you'll have to use tables instead: Never! Never use tables for making your layout (http://www.hotdesign.com/seybold/).

The PHP Guy
Jun 21st, 2009, 02:17 PM
Never use tables for making your layout
Thanks for the link. I found it interesting (and funny :D)

BUT, how does CSS solve the problem in this case? OP's only option, I recon is to use inline elements like <span>

abduraooft
Jun 21st, 2009, 02:22 PM
Have a look at some common layouts without any tables at http://bonrouge.com/3c-hf-fluid.php ( you might get interested in the beauty of CSS designs at csszengarden (http://www.csszengarden.com) )

The PHP Guy
Jun 21st, 2009, 02:45 PM
You were right..



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>No Tables</title>
<style>
div
{
border: 2px solid black;
}
#Container
{
border-style: none;
}
#Ingredients
{
float: left;
}
#Instructions
{
float: right;
}
</style>
</head>
<body>
<div id="Container">

<div id="Ingredients">
<!-- List of ingredients is contained here -->
Ingredients
</div>

<div id="Instructions">
<!-- Instructions for recipe goes here -->
Instructions
</div>

</div>
</body>
</html>


Works!!

I really need to sharpen my CSS skills :(

Thank you, you really inspired me! :thumbsup:

abduraooft
Jun 21st, 2009, 02:50 PM
You are welcome, but your current DOCTYPE is incomplete, which may turn IE into quirks mode. See http://www.alistapart.com/articles/doctype/

The PHP Guy
Jun 21st, 2009, 02:55 PM
You are welcome, but your current DOCTYPE is incomplete

I knew that...

I didn't care about that as I just wanted to see if you were right..

btw, float:left and float:right work well even if I don't specify a DOCTYPE