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.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! ;-)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.Do you have this uploaded online for us to take a look at? Though the float: left should work.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=http://www.webdeveloper.com/forum/archive/index.php/"logo.gif"><img id="header"src="728x90.gif">
<img id="banner" src=http://www.webdeveloper.com/forum/archive/index.php/"banner.jpg">
<div><p>Athens 2004</p><img id="navPic"src=http://www.webdeveloper.com/forum/archive/index.php/"menu_icon.jpg"></div>I'm guessing relative positioning is the way to go with this, as opposed to margins or padding. Anyone care to inform me otherwise? ;-)
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! ;-)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.Do you have this uploaded online for us to take a look at? Though the float: left should work.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=http://www.webdeveloper.com/forum/archive/index.php/"logo.gif"><img id="header"src="728x90.gif">
<img id="banner" src=http://www.webdeveloper.com/forum/archive/index.php/"banner.jpg">
<div><p>Athens 2004</p><img id="navPic"src=http://www.webdeveloper.com/forum/archive/index.php/"menu_icon.jpg"></div>I'm guessing relative positioning is the way to go with this, as opposed to margins or padding. Anyone care to inform me otherwise? ;-)