PDA

View Full Version : Styling every 3rd Div tag



zizther
Mar 20th, 2010, 02:30 AM
Hi,

I don't know if there is an easy way to style every 3rd div tag easily, i guess this type ofthing woul be done using PHP or Javascript.

What i am doing is:

I have a wrapper div and in that i have 6 div tags that are equal width (less than 1/3 of the wrapper div) and float left (so they are in a row), i want each row to contain 3 div's.
Each small div tag has a margin-right of 20px (to creat spacing between the small div's).

My problem is the 3rd div tag also has a margin-right of 20px which puts it over the width of the wrapper div area, making it only 2 small div's per line.

The plan is to intergrate this design into a CMS, so the smaller div's will be in a loop, so i will have no real way of controlling them, say by placing a seperate class on the 3rd div tags.

I don't know if there is a better way of doing this using HTML and CSS, it would be good to know.

What i am using is:

HTML:


<div id="wrapper">

<div id="content">

<div id="gallery">
<div class="entry">
<img src="images/fish.jpg" width="280" height="180" alt="" title="">
</div>

<div class="entry">
<img src="images/fish.jpg" width="280" height="180" alt="" title="">
</div>

<div class="entry">
<img src="images/fish.jpg" width="280" height="180" alt="" title="">
</div>

<div class="entry">
<img src="images/fish.jpg" width="280" height="180" alt="" title="">
</div>

<div class="entry">
<img src="images/fish.jpg" width="280" height="180" alt="" title="">
</div>

<div class="entry">
<img src="images/fish.jpg" width="280" height="180" alt="" title="">
</div>

<div class="clear"></div>

</div><!-- END #gallery -->

</div><!-- END #content -->
</div><!-- END #wrapper -->



CSS:



.clear {
clear: both;
}

#wrapper {
margin: 30px auto 0;
width: 960px;
}

/***** Content *****/
#content {
}

/* Gallery */
#gallery .entry {
background-color: #001922;
float: left;
margin: 0 20px 20px 0;
padding: 10px;
width: 280px;
}
#gallery .entry img {
height: 180px;
overflow: hidden;
width: 280px;
}


I am using a reset code in the CSS too.

Thanks

Nathan

Apostropartheid
Mar 20th, 2010, 04:49 AM
Set a width on the container and float the divs. When they reach the end of a line they'll automatically break.

zizther
Mar 20th, 2010, 01:54 PM
Set a width on the container and float the divs. When they reach the end of a line they'll automatically break.

Thanks,

I have tried that, but the issue is i have a margin-right:20px; on each entry within the container.

I get the line break of 2 if i do that, if i then increase the width of the container to compensate for the extra 20px margin it shows 3 entries in a row.
The only problem with this is it does make the container not centeral as the end entry has an extra 20px on the side.

Visually it is not too obvious, i was just wondering if there was another way to the way i had coded it, i did not know if my way was a quick way around it.

Thanks

met
Mar 20th, 2010, 02:04 PM
it can easily be achieve with a scripting language and a loop ~ you say you're coding a cms so that won't be too hard to integrate.

alternatively you could try giving each element a margin-left of 10px; and margin-right: of 10px; so visually the spacing is the same

you just have to contend with the divs having a 10px gap between them and the containing div rather than having one div 20px too wide (the margin)

zizther
Mar 20th, 2010, 05:29 PM
it can easily be achieve with a scripting language and a loop ~ you say you're coding a cms so that won't be too hard to integrate.

alternatively you could try giving each element a margin-left of 10px; and margin-right: of 10px; so visually the spacing is the same

you just have to contend with the divs having a 10px gap between them and the containing div rather than having one div 20px too wide (the margin)

Thanks for that, did not think of that one!

Atleast with that is evens it up.

I am intergrating the design into a CMS, i am using ExpressionEngine, so i if if comes down to it i can add a script to style the 3rd div tag.

Thanks