/    Sign up×
Community /Pin to ProfileBookmark

horizontal positioning items

Copy linkTweet thisAlerts:
Jan 22.2006

I have an item which contains
– an image
– text 1
– text 2
– text 3

What I want is:

_____________________________

|[U] Image | text 1 | text 2 | text 3 [/U]|

Everything is within a <div>
So I thought:

<p class=”floatleft”>img</p>
<p class=”floatleft”>text 1</p>
etc

floatleft {
float: left;
}

But the text is aligning underneath each other and not horizontal as I intended it.

image | text 1
………| text 2
………| text 3

Like that.

How can I solve this one? I don’t want to use tables though. Perhaps my choice of using the <p> tag for this one isn’t cleaver?

3Pinter

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@KeveyJan 22.2006 — I am using links...hope that is what you meant:

[CODE]<html><head>
<style>
.footer {
font: 8pt Arial, sans-serif;color:#ffffff;background:#faa71b;text-align:center;padding-top:2px;padding-bottom:2px;clear:both;
}
.footer a { margin-left:6px;text-decoration: none;color: #ea4c1c;background-color: transparent;
border-color: #ea4c1c;border-bottom-width: 1px;border-left-width: 0px;border-right-width: 0px;
border-top-width: 0px;border-style: none;
}
.footer a:hover { margin-left:6px;text-decoration: none; color: #000;background-color: transparent;
border-color: #e9c62a;border-bottom-width: 1px;border-left-width: 0px;border-right-width: 0px;
border-top-width: 0px;border-style: none;
}</style></head><body>
<div class="footer"><img src="god.jpg">
<a href="http://www.you.com/terms.html">terms of use</a>
<a href="http://www.you.com/privacy.html">privacy info</a>
<a href="http://www.you.com/mail.html">contact us</a></div>
</body></html>[/CODE]
Copy linkTweet thisAlerts:
@byeeeJan 22.2006 — Have a width for .floatleft and it might be fixed. Or try having the 'links' inside a div.
Copy linkTweet thisAlerts:
@KeveyJan 22.2006 — This is just picture and text:

[CODE]<html><head>
<style>
.footer {
font: 8pt Arial, sans-serif;color:#ffffff;background:#faa71b;text-align:center;padding-top:2px;padding-bottom:2px;clear:both;
}
</style></head><body>
<div class="footer"><img src="god.jpg">
terms of use | privacy info | contact us</div>
</body></html>[/CODE]
Copy linkTweet thisAlerts:
@3PinterauthorJan 22.2006 — Nope that doesn't work.. adding width.. Kevey yours neither.

[code=html]
<div class="item">
<p class="specs">
<a href="test.html">
<img src="pic.jpg" width="150" height="112"></a></p>
<p class="specs">
<h1>text 1</h1></p>
<p class="specs">
text 2</p>
</div>

CSS:
.item{
background-color: #000;
margin: 0 0px 10px 0;
padding:0;
}

.specs{
padding: 10px 0 0 10px;
margin: 0;
font-weight:bold;
float:left;
}
[/code]

I was thinking: how about a display:inline? I thought that this one was only used for <li> ... so that isn't an option?

3Pinter
Copy linkTweet thisAlerts:
@ray326Jan 22.2006 — Consider starting with...

<dl>

<dt><img ...></dt>

<dd>text 1</dd>

<dd>text 2</dd>

<dd>text 3</dd>

</dl>

...since there seems to be a semantic relationship there.

Then style with something like...

dl, dt, dd { margin:0; }

dt, dd { float:left; width:20%; padding:0 2px; border: 1px solid black; }

NOTE: none of this was tested.

Tested version
[code=html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>webdev</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
dl, dt, dd { margin:0; }
dt, dd { float:left; width:20%; padding:0 2px; border: 1px solid black; }
dt img { display:block; }
dt { clear: both; }
</style>
</head>
<body>
<dl>
<dt><img src="http://www.webdeveloper.com/forum/images/buttons/reply.gif"></dt>
<dd>text 1</dd>
<dd>text 2</dd>
<dd>text 3</dd>
<dt><img src="http://www.webdeveloper.com/forum/images/buttons/reply.gif"></dt>
<dd>text 1</dd>
<dd>text 2</dd>
<dd>text 3</dd>
</dl>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@3PinterauthorJan 23.2006 — Ray326,

since my setup isn't a definition list, is it still 'allowed' to use a <dl> ?

To achieve the same result I've used <span>.

I'll try yours too.

3Pinter
×

Success!

Help @3Pinter 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.18,
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,
)...