/    Sign up×
Community /Pin to ProfileBookmark

How to position text within a div

Copy linkTweet thisAlerts:
Aug 26.2004

Trying to place text where I want it within a div. I know how to do things the old fashioned way, but I’m trying to get up to speed and do everything without tabular layouts. I have an image at the right of the div, and text to the left. The image is positioned fine. How do I manipulate the positioning of the text? Thanks in advance.

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@LJKAug 26.2004 — Hi -

Try adding float:left; to the <p> that contains the text - it should try to go as far to the top and left of its container <div> as possible. Then add your image code, also using float:left; give each a left margin that will approximate the position that you need. Just make sure the total widths of both don't exceed the div width.

Good luck,

El.

And kudos for scrapping table-based layouts! ;-)
Copy linkTweet thisAlerts:
@JPnycauthorAug 26.2004 — Well that's basically what I'd done, except that in this instance I want the image at extreme right, so I had it float right, and the text float left, but the text isn't vertically centered in the div, and margins are giving me TOTALLY different results in gecko and IE. I have the height and width of the div set in the css also.
Copy linkTweet thisAlerts:
@NeczyAug 26.2004 — Do you have this uploaded online for us to take a look at? Though the float: left should work.
Copy linkTweet thisAlerts:
@JPnycauthorAug 26.2004 — No, since it's just an exercise, but here's the relevant sections of the code:

<style type="text/css">

<!--

hr { color:rgb(0,49,206); width:880px; height:15px }

#logo { clear:left; float:left; margin: 43px 35px 0px 5px }

#header { clear:right; float:right; margin: -3px 0px -5px 0px}

#banner { margin: -10px 0px 15px 0px }

#navPic { float:right; clear:right; margin: -17px 0px 0px 0px }

div { background-color:rgb(24, 148, 231); width:150px; height:15px; }

p { color:#FFFFFF; font: bold 10pt Tahoma; margin: auto }

-->

</style>

</head>

<body>

<hr>

<img id="logo" src="logo.gif"><img id="header"src="728x90.gif">

<img id="banner" src="banner.jpg">

<div><p>Athens 2004</p><img id="navPic"src="menu_icon.jpg"></div>
Copy linkTweet thisAlerts:
@JPnycauthorAug 26.2004 — I'm guessing relative positioning is the way to go with this, as opposed to margins or padding. Anyone care to inform me otherwise? ;-)
×

Success!

Help @JPnyc 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.4,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...