...

View Full Version : Help with positioning



Partizan
02-19-2009, 06:35 PM
Been messing around for quite a while with this.

I want to space the three DIVs (highlighted in red border) out a bit, that is have some space inbetween them. http://www.minifigtimes.com/test.shtml

I have done this in the CSS but it also moves out the first DIV from the right which is not what I want (DIV with text "LFC Comeback Ends Napoli's...").

Basically I want the leftmost column as is but the other two spaced out evenly, about an inch of blank space between them.

This is the relevant code

CSS



#subwrapper{
margin: 0 0 0 0; /* above left below right */
padding: 0;
border:1px solid #f00; /*diagnostic*/
overflow:auto; /*these two lines*/
width:75%; /*uncollapse the box*/
}


#subwrapper div{
margin: 0; /* above left below right */
padding:0px;
border:1px solid #f00; /*diagnostic*/
width:20%; /*sets the column width as a percentage of #subwrapper*/
float:left;
}

#subwrapper img{
width: 80%;
height: 80%;

}

HTML


<div id="subwrapper">
<div>
<img src="http://www.minifigtimes.com/images-2009/news/2009-02-07-p1.png" alt="test">
<p>LFC Comeback Ends Napoli's Record Unbeaten Run <a href="http://www.minifigtimes.com/news/2009/2009-02-07-story01.shtml" class="link-blue">Read</a></p>
</div>

<div>
<img src="http://www.minifigtimes.com/images-site/test-image-medium.png" alt="test">
<p id="subbody">A goal from Den&#237;lson soon followed and the three points were secured by Marco Materazzi in the 83rd minute.</p>
</div>

<div>
<img src="http://www.minifigtimes.com/images-site/test-image-medium.png" alt="test">
<p>Ajax Skerries boss Roberto Donadoni praised his minifigs for beating the odds and claimed if they believe in themselves he believes they can go all the way.</p>
</div>
</div> <!-- sub wrapper Div end -->


Can anyone please help?

Excavator
02-19-2009, 06:55 PM
Goodmorning Partizan,
Give that middle one a class and you can add a margin to it. This should work:

#subwrapper .mid {
margin: 0 20%;
}
<p>LFC Comeback Ends Napoli's Record Unbeaten Run <a href="http://www.minifigtimes.com/news/2009/2009-02-07-story01.shtml" class="link-blue">Read</a></p>
</div>

<div class="mid">
<img src="http://www.minifigtimes.com/images-site/test-image-medium.png" alt="test">
<p id="subbody">A goalhttp://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.minifigtimes.com%2Ftest.shtml

Partizan
02-19-2009, 07:24 PM
Thanks again Excavator!

Worked perfectly :):)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum