By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,766 Members | 1,261 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,766 IT Pros & Developers. It's quick & easy.

One <DIV> and another one followed: how to place them in different rows?

P: n/a
Hi.

I've got this piece of code:

----------------//---------------------
<html><head>
<style type="text/css">
#block {margin:0 0 0 0; display:block;}
..left-pic {display:block; float:left;}
..right-pic {display:block;float:right;}
</style>
<body>
<div class="block">
<div class="left-pic">
<img src="http://www.google.com/images/logo_sm.gif" />
</div>
</div>
<div class="block">
<div class="right-pic">
<img src="http://www.google.com/images/logo_sm.gif" />
</div>
</div>
</body></html>
-------------//----------------------

The two logos (two 'div-block's) are in the same row, but I want they
are in different rows. I mean, the first 'div-block' (with one pic on
the left) in one row, and the second 'div-block' (with another pic on
the right) in another row.

I don't want to use tables.

I tried inserting <br> between two div's, but it does not work.

Any suggestion? Thank you very much.
Jul 20 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
fr**********@europe.com (Francesco Moi) wrote:
Hi.

I've got this piece of code:

----------------//---------------------
<html><head>
<style type="text/css">
#block {margin:0 0 0 0; display:block;}
You don't have any elements with id="block", so this will have no
effect. If you want to apply this to the elements with class="block",
then you need ".block".
.left-pic {display:block; float:left;}
.right-pic {display:block;float:right;}
</style>
<body>
<div class="block">
<div class="left-pic">
<img src="http://www.google.com/images/logo_sm.gif" />
</div>
</div>
<div class="block">
<div class="right-pic">
<img src="http://www.google.com/images/logo_sm.gif" />
</div>
</div>
</body></html>
-------------//----------------------

The two logos (two 'div-block's) are in the same row, but I want they
are in different rows. I mean, the first 'div-block' (with one pic on
the left) in one row, and the second 'div-block' (with another pic on
the right) in another row.


..block {margin:0 0 0 0; display:block; clear: both;}

By the way: there's no need to specify "display: block;" for a style
that will only be applied to elements that are blocks anyway, and
"margin: 0;" is a useful shortcut for "margin: 0 0 0 0;".

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.