How to get an Img next to the page centered Div, baselined

Forum Moderators: not2easy

Message Too Old, No Replies

How to get an Img next to the page centered Div, baselined

centered Div and img have different height and width

skasky

10:27 pm on Aug 1, 2010 (gmt 0)

Hi,
I am totally new here and beginner in CSS, too. I tried to find answer for my problem by search this forum, but had no luck. Also, I googled for half a day but didn't find solution, so decided to ask for help.

Basically, I have a Div centered on page (horizontally and vertically) and need to "stick" an image next to that Div, aligned to Div's baseline.

My HTML:

<div id="wrapper">
<div id="main">
...some content...
</div>
</div>

<div id="img">
<img src="someimg.gif" />
</div>

My CSS:

#wrapper {
height: 440px;
width: 760px;
text-align: center;
border: 1px solid #000;
background: white;
margin: 0 auto;
clear: left;
color: #fff;
position:absolute;
top: 50%;
left: 50%;
margin-left: -380px;
margin-top: -220px;
}

What I don't know is how to define
#img

to get image displayed next to the Div, baseline...

Any help would be greatly appreciated.
Thanks in advance from confused newbie :/

Shado

6:34 am on Aug 2, 2010 (gmt 0)

Don't text aligh divs, rather use margin: 0px.

Make your wrapper the container to hold 2 divs. Set the 2 divs width to equal the wrapper.

birdbrain

7:52 am on Aug 2, 2010 (gmt 0)

Hi there skasky,

and a warm welcome to these forums. ;)

This is how I would approach your problem...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="description" content="">
<meta name="keywords" content="">

<title>untitled document</title>

<style type="text/css">
html,body{
 height:100%;
 margin:0;
 padding:0;
 background-color:#eef;
 }
body {
 min-height:442px;  /* total vertical height of the #main */
 }
#vertical{
 width:100%;
 height:50%;
 margin-top:-221px;  /* half the total vertical height of the #main */
 float:left;
}
#main {
 position:relative;
 width:720px;
 height:400px;
 padding:20px;
 border:1px solid #000;
 margin:auto;
 clear:both;
 background-color:#fff;
 text-align:justify;
 }
#myimage {
 position:absolute;
 right:-122px;
 bottom:0;
 width:100px;
 height:100px;
 padding:5px;
 border:1px solid #909;
 background-color:#fcf;
 }
</style>

</head>
<body>

<div id="vertical"></div>

<div id="main">

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p><p>
Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae, 
orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum 
augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet 
interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque 
lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis, 
lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi. 
Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum 
volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla. 
Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque 
metus urna, semper eget, aliquam ac, feugiat nec, massa.
</p>

<img id="myimage" src="http://www.coothead.co.uk/images/anim2.gif" alt="animated gif">

</div><!-- end #main -->

</body>

</html>

birdbrain

skasky

10:03 am on Aug 2, 2010 (gmt 0)

Hi birdbrain,
Thank you for warm welcome
and hugeTHANKS for your kindly answer, it is greatly helpful.
Yes, your solution completely solved my problem. Simply brilliant. Cheer!
Interesting, I searched "whole the Net" and didn't find anything close to what you done.
Thanks again.
Wishing you all the best.

birdbrain

11:15 am on Aug 2, 2010 (gmt 0)

No problem, you're very welcome. ;)

Webmaster World - 1, Google - 0. :)