/    Sign up×
Community /Pin to ProfileBookmark

aligning div elements

Copy linkTweet thisAlerts:
Nov 17.2011

When I use div tag , does the new tag outside closing div start in new line only ? When I am using float , new tag starts besides div tag only.
So how can I have two div tags one aligned to left of page and other aligned to right and both at different levels i.e. right aligned block is below left aligned block

Thanks

to post a comment
HTML

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@Sup3rkirbyNov 18.2011 — So to confirm, you are wanting two divs that are not beside each other, but each on their own line; one aligned to the left of the page and the other aligned to the right?

The code below is based upon this assumtion:
[code=html]
<div>&nbsp;<div style="float: left;">Left</div></div>
<div><div style="float: right;">Right</div></div>
[/code]

Basically placing each of the left and right floating <div> tags inside of another <div> forces them to float to the left or right of these new containers, which by default will each take up their own line. I insert the HTML character code for a non-breaking space because when elements take on the float property the containing elements disregard them vertically. The extra space just forces the containing div to have a height(forcing the next element on to a new line).
Copy linkTweet thisAlerts:
@KorNov 18.2011 — Keep in mind that the floated elements [I]escape from their parent's overflow[/I]. To keep them in, you may add an empty DIV child at the end, which should clear the float propagation:
<i>
</i>&lt;div id="parent"&gt;
&lt;div style="float:left"&gt;&lt;/div&gt;
&lt;div style="float:right"&gt;&lt;/div&gt;
[COLOR="Blue"]&lt;div style="clear:both"&gt;&lt;/div&gt;[/COLOR]
&lt;/div&gt;
Copy linkTweet thisAlerts:
@jigneshjsoniauthorNov 18.2011 — Thanks for answer.

Still its not working.

I have used following code&lt;div id="all"&gt;
&lt;div&gt;&amp;nbsp;
&lt;div id="header" stlye="float:left;"&gt;

<i> </i> &lt;h3&gt;Following is left image&lt;/h3&gt;
<i> </i> &lt;img src="C:UsersJigneshDesktopPics &amp; MoviesIMG_4606.jpg" &amp;#184;width="300" height="200"/&gt;

<i> </i> &lt;/div&gt;
<i> </i> &lt;div style="clear:both"&gt;&lt;/div&gt;

<i> </i> &lt;div&gt;

<i> </i> &lt;div id="middle"&gt;

<i> </i> &lt;p&gt;Lets see if this image has been aligned to right or not&lt;/p&gt;
<i> </i> &lt;div&gt;&amp;nbsp;&lt;/div&gt;
<i> </i> &lt;h3 align=right&gt;Following is Right image&lt;/h3&gt;
<i> </i> &lt;/div&gt;&lt;/div&gt; ........
1) when I use a <div><div style="float:right;"> , it will float child div tag to right. BUt image or text within child tag will again be aligned to left only. I mean style will be applicable to element to whichh it is applied and not to child elements.

2) <h3 align=right>Following is Right image</h3> , for this h3, when I use style="float:right;" , it does keep image to the right on web page. For that I have to use align only. Why is that ?
Copy linkTweet thisAlerts:
@Sup3rkirbyNov 19.2011 — You'll want to use [B][I][COLOR="Red"][FONT="Courier New"]style="text-align: right;"[/FONT][/COLOR][/I][/B] in the [B][I][COLOR="Red"][FONT="Courier New"]<h3>[/FONT][/COLOR][/I][/B] tag if you want to align it's contents to the right as well. [B][I][FONT="Courier New"]float[/FONT][/I][/B] applies to the element itself while [B][I][FONT="Courier New"]text-align[/FONT][/I][/B] applies to the contents inside of an element.
×

Success!

Help @jigneshjsoni spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...