Partizan
02-19-2009, 05: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í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?
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í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?