/    Sign up×
Community /Pin to ProfileBookmark

Div next to previous div?

Copy linkTweet thisAlerts:
Mar 17.2012

How do I get a div next to the previous div, not under it?

to post a comment
HTML

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@TheAliveWinnerMar 17.2012 — Check this!
[code=html]
<!doctype html>
<html>
<head>
<style>
div#left-div {
width: 200px;
height: 200px;
background-color: red;

float: left; // this creates magic!
}
div#right-div {
width: 200px;
height: 200px;
background-color: orange;

float: left; // this too creates magic!!!
}
</style>
</head>
<body>
<div id="left-div">Is this the 'first div'?</div>
<div id="right-div">...and this is the second one!</div>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@asaauthorMar 17.2012 — Thanls! What about 3 div &#180;s?
Copy linkTweet thisAlerts:
@TheAliveWinnerMar 17.2012 — [B]Use the same logic![/B]

[I]float: left[/I]

Check this: CSS Floating
Copy linkTweet thisAlerts:
@handcraftedwebMar 17.2012 — If you add the style { display:inline-block } to the divs they can all be on the same line.

You can use floats to do this but float has other effects like it's parent will not expand to contain it.
×

Success!

Help @asa 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.27,
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,
)...