/    Sign up×
Community /Pin to ProfileBookmark

div element positioning

i want to align 4 div elements horizontally without using a table.
<div 1></div> <div 2></div> <div 3></div> <div 4></div>
Out of 4 div, first div may have variable content from database and adjust its width. Besides that, other three div should adjust themself and fit in a single line.
How can i set the styles for the above scenario?

to post a comment
CSS

1 Comments(s)

Copy linkTweet thisAlerts:
@onlinetrainingMay 06.2010 — To have your 4 divs aligned horizontally, you certainly have to float each one of them.

<div class="section"></div>

<div class="section"></div>

<div class="section"></div>

<div class="section last"></div>


------------------------------
In your stylesheet

.section{

float:left;

clear:none;

width:24&#37;;

height:auto;

margin-right:1%;

overflow:hidden;

}

.last{

float:right;

clear:right;

margin-right:0

}
--------------------------------


Because your page is dynamic you can add an inline style in each div to set its width accordingly.

For example your PHP, ASP or JSP code could reformat your HTML markup as shown below:

<div class="section" style="with:40%;"></div>

<div class="section" style="width:19%"></div>

<div class="section" style="width:19%"></div>

<div class="section last" style="width:19%"></div>
×

Success!

Help @dmasath 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.28,
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,
)...