PDA

View Full Version : question about divs and alignments

JPinMaryland
01-22-2011, 10:35 AM
I was setting up my web page with two columns using divs. Typically one column has text and the other has an image. But I didnt want the image to be exactly in line with the top edge of the text I wanted the image to be down so the image is set off more...

ANyhow I found I had to use both the "float" command as well as the relative positioning command together in order to create that effect. If I leave out the float right command then a right column image will line up below the left column text. Why is that? Wouldnt the relative command take it relative from the top edge or the right edge.

HEre is the language I would up using in the style sheet, for the div class:right image:



div.rightimage {position: relative; top:90px; right: 10px; float:right; width:280px}

It's working okay, but just wondering why I need both float right and the relative stuff.

Thanks
wilderness
01-22-2011, 10:45 AM
div.rightimage {position: relative; top:90px; right: 10px; float:right; width:280px}

In this instance, "div.rightimage" is a child container below another div.

Here's a simple explanation on "position property (http://www.w3schools.com/Css/pr_class_position.asp)", scroll down to where it begins "Property Values".

And the explanation provides that what "you" are doing with "relative" is making an adjustment in position away from the default position.
GameTheory
01-22-2011, 10:50 AM
I was setting up my web page with two columns using divs. Typically one column has text and the other has an image. But I didnt want the image to be exactly in line with the top edge of the text I wanted the image to be down so the image is set off more...

ANyhow I found I had to use both the "float" command as well as the relative positioning command together in order to create that effect. If I leave out the float right command then a right column image will line up below the left column text. Why is that? Wouldnt the relative command take it relative from the top edge or the right edge.

HEre is the language I would up using in the style sheet, for the div class:right image:



div.rightimage {position: relative; top:90px; right: 10px; float:right; width:280px}

It's working okay, but just wondering why I need both float right and the relative stuff.

Thanks
Hard to say without all the code and other styles. The setting of !DOCTYPE can also have an effect, and different browsers will display differently. (Floats are notorious for this -- they look fine in one thing and the box is not visible or overlapping another box on another browser.) What you think is now correct may just be a side-effect and will be unreliable in other browsers. In general, the float property doesn't effect vertical alignment...
JPinMaryland
01-22-2011, 04:16 PM
Thanks for the above posts. I havent worked through that link yet so I may have more to add. I tried googling it, and read through a lot of stuff, I found one site that clued me into the use of both float/position relative but none of them offered clear explanation of what is going on..

I did display fine in both IE and Firefox, in fact leaving out the float affected it the very same way in both browsers..
JPinMaryland
01-22-2011, 05:08 PM
OK here is the actual code, there was style sheet associated with this but i think this might suffice for now. Right where it says to "INSERT PAGE CONTENT" content there is a left and right column created by divs. In the first set of image/text the text on the right is below the level of the image. In the second set of image/text where I have typed "THIS IS THE SECOND SET OF TEXT MATTER" here the image and text are right on the same level. ALthough in both cases the coding is the same a "float left" and then a float right div. I tried to follow the nesting of the divs above that but had trouble. I guess that is where the problem is . thanks a lot. jp:




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<title>template: home</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<!-- **** layout stylesheet **** -->
<link rel="stylesheet" type="text/css" href="style/style.css" />

<!-- **** colour scheme stylesheet **** -->
<link rel="stylesheet" type="text/css" href="style/blue.css" />

</head>

<body>
<div id="main"><div id="links">
<!-- **** INSERT LINKS HERE **** -->
<a href="home.html">Home</a> | <a href="Learn.html">Learn About </a> |<a href="Get started.html">Get Now</a> | <a href="Q and A.html">FAQ</a> | <a href="glossary">Reference section</a> | <a href="contact.html">Contact</a>
</div>
<div id="logo"><p style="padding-left:40px; text-align:left; padding-top:10px;">Applied Research </p></div>
<div id="menu">
<ul>
<!-- **** INSERT NAVIGATION ITEMS HERE (use id="selected" to identify the page you're on **** -->
<li><a id="selected" href="Q and A.html">Questions and Answers</a></li>
<li><a href="Q and A2.html">Q and A part 2.</a></li>
<li><a href="Q and A3.html">Q and A part 3.</a></li>
<li><a href="glossary.html">Glossary of terms</a></li>
</ul>
</div>
<div id="content">
<div id="column1">
<div class="sidebaritem">
<!-- rounded corners - top **** -->
<div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
<h1>Related links.</h1>
<!-- **** INSERT NEWS ITEMS HERE **** -->
<h2>07/06/2010</h2>
<p>News Item</p>
<p><a href="#">read more ...</a></p>
<p></p>
<p></p>
<h2>07/06/2010</h2>
<p>News Item</p>
<p><a href="#">read more ...</a></p>
<!-- rounded corners - bottom **** -->
<div class="rbottom"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div>
</div>
<div class="sidebaritem">
<!-- rounded corners - top **** -->
<div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
<h1>additional links</h1>
<div class="sbilinks">
<!-- **** INSERT ADDITIONAL LINKS HERE **** -->
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<!-- rounded corners - bottom **** -->
<div class="rbottom"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div>
</div>
</div>
<div id="column2">
<h1>Q. and A. Part One: Different types of blal bla.</h1>
<!-- **** INSERT PAGE CONTENT HERE **** -->

<div style="float:left; width:320px;">
<img src="style/amiss2.gif" width="200" height="300" class="img" alt="" />
</div>
<div style="float:right; width:320px;">

<h1>Is there more than one tybka bla bal t?</h1>

<p>Yes. There are ubla bla bla </p>

<p> BLa, bla bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bl bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla b </p>

<p>BLa, bla bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bl bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla b. </p>

<p>BLa, bla bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bl bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla b. </p>



</div>
<br style="clear:both" />
<p>------------------------------------------------------------------------------------------</p>
<h2> What type of subject matter should get t?</h2>
<br/>
<div style="float:right; width:280px;">
<img src="style/amiss2.gif" width="280" height="300" class="img" alt="" />
</div>
<div style="float:left; width:280px;">

<p>THIS IS THE SECOND SET OF TEXT MATTER a bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla b. </p>

<p>AdBLa, bla bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bl bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bis tread. </p>

<p>IBLa, bla bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bl bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla b" </p>

</div>
<br style="clear:both" />
<p>------------------------------------------------------------------------------------------</p>
<h2>More about design patents.</h2>
<br/>
<div class="rightimage" >
<img src="style/amiss2.gif" width="350" height="500" class="img" alt="" />
</div>
<div style="float:right; width:300px;">

<h2>When talking to a be careful when you use the term: " ." </h2>

<p> ABLa, bla bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bl bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla b. </p>

<p> FBLa, bla bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bl bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla b. </p>

<h2>A word of caution about </h2>

<p>DeBLa, bla bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bl bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bs, etc. </p>


<h2>Plant .</h2>

<p> TBLa, bla bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bl bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bla la bla bla bal bla bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla bla bg.) <p>

</div>

<br style="clear:both" />
<p>&nbsp;</p>
</div>
</div>
<div id="footer">
<a href="http://www.araynordesign.co.uk">copyright &copy; 2010 ARDesign</a> | <a href="http://validator.w3.org/check?uri=referer">XHTML 1.1</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | <a href="http://www.dcarter.co.uk">Template modified from dcarter</a>
JPinMaryland
01-25-2011, 01:10 PM
Thanks for everyone taking an interest. The basic issue seems to be that the rel position command will place that col relative to everything in the div that comes before it, including divs, images, in line stuff whatever.

I suppose that right column with the links is making the next div go down.

The "float" command allows the div to override most of that other stuff and float all the way to the right or left.

Again I appreciate your interest.