Help with CSS
Hi. I would like to ask how can one have two div tags in the same line. At present everytime I create a second div tag(a menu in each div tag) it is going below the first one. Could anyone help me please? Many thanks.
Hi. I would like to ask how can one have two div tags in the same line. At present everytime I create a second div tag(a menu in each div tag) it is going below the first one. Could anyone help me please? Many thanks.
kazimmerman posted this at 19:25 — 15th July 2006.
He has: 698 posts
Joined: Jul 2005
To get any two tags in line, use the 'display' selector.
You would have something like this:
div#div1 {display: inline;
...(other properties)...
}
div#div2 {
display: inline;
...(other properties)...
}
Now that I think about it, I'm not 100% sure if it works for DIVs, but it does work for tags like P, LI, etc...
Kurtis
steve40 posted this at 19:29 — 15th July 2006.
He has: 490 posts
Joined: May 2005
is a block level element, which means it will automatically create a space. You can send one right, and the other left, then line them up with margining. But that's the best you can do as far as I know.
Of course I am not the foremost expert on this sort of thing.
webguy84 posted this at 22:40 — 15th July 2006.
They have: 11 posts
Joined: May 2006
Can anyone give me a link for a good tutorial about inline with div tags. Thanks
steve40 posted this at 23:01 — 15th July 2006.
He has: 490 posts
Joined: May 2005
This might help you, take a look.
alistapart.com
Titanic Dreams posted this at 04:22 — 26th July 2006.
They have: 4 posts
Joined: Jul 2006
http://www.mandarindesign.com/boxes.html isn't to bad for some css.
benf posted this at 19:50 — 26th July 2006.
They have: 426 posts
Joined: Feb 2005
you need to float left and right....
#div
{
float: left;
}
kazimmerman posted this at 01:50 — 27th July 2006.
He has: 698 posts
Joined: Jul 2005
Yeah, 'display: inline' does not work for DIVs. Here's some sample code that you could use to do it.
The HTML:
<div class="left"><p>Here's some text...</p>
</div>
<div class="left">
<p>Here's some more text...</p>
</div>
The CSS:
div.left {float: left;
}
These would float side by side. You could set one to 'float: right' but this would achieve the same effect by setting an appropriate width and margin.
Kurtis
phiber posted this at 02:30 — 27th July 2006.
They have: 20 posts
Joined: Jul 2006
This should work.
I hope this helps.
Johnny
[edit]
Sorry, didn't see the post with this info already.
[/edit]
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.