/    Sign up×
Community /Pin to ProfileBookmark

align div

Copy linkTweet thisAlerts:
Jul 07.2005

Hi !!!
My question is not so simple…
I have 5 div I want to align them all on the same level without using absolute positioning…
But, if I give them relative positioning, they will stack upon each other like that :
div 1
div 2
div 3
div 4
div 5

I want them separated from each other, and on the same vertical level, but I can’t use the absolute positioning ( otherwise, it would be too easy… )

Anyone has an idea ???
It would be great…
thanks !!

Oh, I forgot to mention :
they should be like :
div 1 div 2 div3 div 4 div 5, but on the left the spacing has to start 277px from the left, and on the right, it should end 130px from the right…
I tried with margins and padding and all, but I can never get everything working at the same time…

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@Ness_du_FratauthorJul 07.2005 — Drop it, I've done it with images...

I'm still curious to know if it's possible to align div on the same vertical level, without using absolute positioning, and without having to set negative top-margins...
Copy linkTweet thisAlerts:
@qznJul 07.2005 — [CODE]<html>
<head>
<title>blah</title>
<style>
.g1 {background-color:#336699; width:50px;}
.g2 {background-color:#339966; width:50px;}
.g3 {background-color:#996633; width:50px;}
.g4 {background-color:#993366; width:50px;}
.g5 {background-color:#663399; width:50px;}
.g6 {text-indent:277px;}
</style>
</head>

<body>
<!-- Div wants to make a new line each time, like a <br> -->
<div class="g1"></div>
<div class="g2"></div>
<div class="g3"></div>
<div class="g4"></div>
<div class="g5"></div>
<br>

<!-- Span will stay inside the div mostly -->
<div class="g6">
<span class="g1"></span>
<span class="g2"></span>
<span class="g3"></span>
<span class="g4"></span>
<span class="g5"></span>
</div>

</body>
</html>[/CODE]

It seems like what you want is a span tag

This code would push those in 277px and give you an idea of why they dont place right in a line without spacing attached to fix it.

edit: k guess you solved it
Copy linkTweet thisAlerts:
@Ness_du_FratauthorJul 07.2005 — qzn, that's exactly what I was looking for...

but, your spans don't work if you don't have any text in it... ?

I had to edit the page and add text between the span tags to make it work...

do you know why ???
×

Success!

Help @Ness_du_Frat 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.24,
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,
)...