Style last div

Forum Moderators: not2easy

Message Too Old, No Replies

Style last div

greencode

10:38 pm on Jul 18, 2010 (gmt 0)

I have 4 divs that are blocks in a horizontal line with a right-margin of 10px. The problem is I don't want a right-margin on the last div in the line otherwise it won't fit it's containing area and gets pushed down on to the following line.

Now, normally I would simply add a separate class to that div so I could style it differently but these divs are getting brought in dynamically so there's no way of me doing this.

Is there anything I can do to remove the right-margin from the last div?

birdbrain

10:16 am on Jul 19, 2010 (gmt 0)

Hi there greencode,

as you have not supplied your actual code, the best that I can do is give you a basic example...


<!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">

<title>four boxes in a row</title>

<style type="text/css">
#container {
  width:1002px;
  padding:10px;
  border:1px solid #000;
  margin:auto;
  overflow:hidden;
 }
#container div {
  float:left;
  width:241px;
  padding:5px 0;
  border:1px solid #600;
  margin-right:10px;
  background-color:#fee;
  text-align:center;
 }
#container div+div+div+div {
  margin-right:0;
 }
</style>

</head>
<body>

<div id="container">
<div>box one</div>
<div>box two</div>
<div>box three</div>
<div>box four</div>
</div>

</body>
</html>

...and hope that it helps. ;)

birdbrain

greencode

11:17 am on Jul 19, 2010 (gmt 0)

Thanks birdbrain. Works superbly well. Didn't realise you could do this. I love learning new stuff ;-)

birdbrain

11:43 am on Jul 19, 2010 (gmt 0)

No problem. you're very welcome. ;)

Further reading:-

adjacent-selectors [w3.org]

birdbrain

greencode

6:34 pm on Oct 2, 2010 (gmt 0)

Hi... I just wanted to come back to this for a minute and hope that someone can help.

The above code is fantastic and works very well in a single row but what if have a grid that consists of, let's say, 4 x 4 divs (that have a right and bottom margin of 10px) and I need the last div in each row to have no margin (otherwise it'll ruin the containing div) and also for the last row in the grid not to have a bottom margin.

How can I accomplish this?

Any help would be greatly appreciated.

sanji41

1:49 pm on Oct 3, 2010 (gmt 0)

please provide your code, and html. and other details as well.

greencode

4:44 pm on Oct 3, 2010 (gmt 0)

Hi. The code is pretty much the same as the previous code in this post but you'll see it a little clearer here. Basically I'd like to achieve a 4 x 2 grid but because the last of the four divs in each row has the margin right then it spans over on to the next line. Likewise I'd like the last row to have no bottom margin.

The thing is these are auto generated so I have no idea how many divs will be in the space. It'd be easy to do if there were a set amount because I could simply assign another class to those divs.

The code is:


<!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">

<title>four boxes in a row</title>

<style type="text/css">
#container {
width:1002px;
padding:10px;
border:1px solid #000;
margin:auto;
overflow:hidden;
}
#container div {
float:left;
width:241px;
padding:5px 0;
border:1px solid #600;
margin-right:10px;
margin-bottom:10px;
background-color:#fee;
text-align:center;
}
/*#container div+div+div+div {
margin-right:0;*/
}
</style>

</head>
<body>

<div id="container">
<div>box one</div>
<div>box two</div>
<div>box three</div>
<div>box four</div>
<div>box five</div>
<div>box six</div>
<div>box seven</div>
<div>box eight</div>
</div>

</body>
</html>

sanji41

2:44 am on Oct 4, 2010 (gmt 0)

considering it's auto generated I will use li, its easier to manage and I use it to display data from the database..here is the code:


<style type="text/css">
body{
    margin:0;
    padding:0;
}
#wrapper{
    width:960px;
    margin:0 auto 0 auto;
    padding:0px;
}
#header{
    height:100px;
    padding:5px;
}
#header .banner{
    float:left;
}
#container{
    padding:5px;
    margin:0 auto 0 auto;
    width:800px;
}
 
#container li{
    list-style-type:none;float:left;margin:15px;
    width:150px;
    height:100px;
    border:5px solid #ccc;
}
    
 
#footer{
    margin:0;
}
#footer .foot{
    text-align:center;
}
 
</style>
<body>
<div id="wrapper"><!--wrapper-->
 
    <div id="header"><!--start of header-->
    header
    </div><!--end of header-->
        <div id="container"><!--start of container-->
           
              <ul>
                <li>one</li>
                <li>two</li>
                <li>three</li>
                <li>four</li>
                <li>five</li>
                <li>six</li>
                <li>seven</li>
                <li>eight</li>
                
              </ul>
          
          
           
           
           
        </div><!--end of container-->
    
      
     
</div><!--end of wrapper-->
</body>
</html>

give me a heads up if somethings wrong, and hope this helps :D

greencode

2:12 pm on Oct 4, 2010 (gmt 0)

Hi, thanks for looking into this but there's still an issue.

For the first 3 blocks I would need a margin on the right but for the last one I would not require a margin. If, for example I had a right-margin of 50px and bottom-margin of 50px on all blocks then the final block and final row would end up pushing the containing div out and would also not end up center aligning in the page.

From what I can see on these that you've produced all of those blocks have the same margins

enigma1

2:44 pm on Oct 4, 2010 (gmt 0)

Use the first sample code by birdbrain with the divs but instead of specifying just one div for the margin specifics setup a class so the right-side divs have no right margin.

here it is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<title>test page</title>
<style type="text/css">
#container {
width:1002px;
padding:10px;
border:1px solid #000;
margin:auto;
overflow:hidden;
}
#container div {
float:left;
width:241px;
padding:5px 0;
border:1px solid #600;
margin-right:10px;
background-color:#fee;
text-align:center;
}
#container .rightside {
margin-right:0;
}
</style>
</head>
<body>
<div id="container">
<div>box one</div>
<div>box two</div>
<div>box three</div>
<div class="rightside">box four</div>
<div>box five</div>
<div>box six</div>
<div>box seven</div>
<div class="rightside">box eight</div>
</div>

</body>
</html>

The rightside class is set with a 0 margin for the right side.

greencode

3:04 pm on Oct 4, 2010 (gmt 0)

Thanks, but as I explained this would be fine doing this if I were coding these exact divs etc but these are being auto generated so I have no idea how many blocks there will be and therefore I'd be unable to code each one.

birdbrain

3:42 pm on Oct 4, 2010 (gmt 0)

Hi there greencode,

I probably mislead you with my original code as I wrote it to in response to this...

The problem is I don't want a right-margin on the last div in the line otherwise
it won't fit it's containing area and gets pushed down on to the following line.

I would normally have resolved the problem like this...


<!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"> 
 
<title>ten boxes in a row</title> 
 
<style type="text/css"> 
#container { 
 width:1012px; 
 padding:10px 0 0 10px; 
 border:1px solid #000; 
 margin:auto; 
 overflow:hidden; 
} 
#container div { 
 float:left; 
 width:241px; 
 padding:5px 0; 
 border:1px solid #600; 
 margin:0 10px 10px 0; 
 background-color:#fee; 
 text-align:center; 
} 
</style> 
 
</head> 
<body> 
 
<div id="container"> 
<div>box one</div> 
<div>box two</div> 
<div>box three</div> 
<div>box four</div> 
<div>box five</div> 
<div>box six</div> 
<div>box seven</div> 
<div>box eight</div> 
<div>box nine</div> 
<div>box ten</div> 
</div> 
 
</body> 
</html>

birdbrain

greencode

6:53 pm on Oct 4, 2010 (gmt 0)

The problem with this is if I have different sized gaps then it doesn't work. For example if I want a nice 10px border around all of the container div's content and then those divs within have a right margin of, say 80px and bottom margin of 30px then I can't see a way of getting them to fit in that space and make everything look even without adding a class to each of those on the right column and all those on the bottom row?!


<!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"> 
 
<title>ten boxes in a row</title> 
 
<style type="text/css"> 
#container { 
 width:1040px; 
 padding:10px; 
 border:1px solid #000; 
 margin:auto; 
 overflow:hidden; 
} 
#container div { 
 float:left; 
 width:200px; 
 padding:5px 0; 
 border:1px solid #600; 
 margin:0 80px 30px 0; 
 background-color:#fee; 
 text-align:center; 
} 
</style> 
 
</head> 
<body> 
 
<div id="container"> 
<div>box one</div> 
<div>box two</div> 
<div>box three</div> 
<div>box four</div> 
<div>box five</div> 
<div>box six</div> 
<div>box seven</div> 
<div>box eight</div> 
<div>box nine</div> 
<div>box ten</div> 
</div> 
 
</body> 
</html>

birdbrain

7:16 pm on Oct 4, 2010 (gmt 0)

Hi there greencode,

I have given you the solution to the problem that you presented.

Now you have decided to move the goal posts again.

It seem to me that you are just extracting the urine? ;)

If you require further help, from me anyway, then I suggest that you supply the

EXACT PARAMETERS

of the required code.

birdbrain

greencode

7:29 pm on Oct 4, 2010 (gmt 0)

Hi birdbrain. I didn't mean to upset you there and I did say in my follow up message on the 2nd October that your original solution worked perfectly well but I am now doing another project that has uneven margins. The code I've given above is the code that I need to figure out how to work a solution. The main issue is that I'm unable to add separate classes to the right column contents and the bottom row contents - something if it were a static site then I could easily do and add zero margins on those offending divs.

If you take a look at the code above it should have 4 boxes on the first row, 4 on the second and the remaining 2 on the third row but because it has a wide right margin these end up spanning over onto the next row.

Again, apologies if you're offended - that really is the last thing I meant to do!

birdbrain

8:10 pm on Oct 4, 2010 (gmt 0)

Hi there greencode,

I am neither offended or upset, just a little disappointed with your reasoning. ;)

If you increase the overall width of the boxes with margin-right by 29px,
then the width of the container will have to be increased by 116px -(4x29).

The container padding values will also need adjusting to balance the increased margin value.

Here is your code with my amendments...


<!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"> 
 
<title>ten boxes in a row</title> 
 
<style type="text/css"> 
#container { 
 /*width:1040px;*/ 
 width:1128px; 
 /*padding:10px;*/ 
 padding:30px 0 0 80px; 
 border:1px solid #000; 
 margin:auto; 
 overflow:hidden; 
 } 
#container div { 
 float:left; 
 width:200px; 
 padding:5px 0; 
 border:1px solid #600; 
 margin:0 80px 30px 0; 
 background-color:#fee; 
 text-align:center; 
 } 
</style> 
 
</head> 
<body> 
 
<div id="container"> 
 <div>box one</div> 
 <div>box two</div> 
 <div>box three</div> 
 <div>box four</div> 
 <div>box five</div> 
 <div>box six</div> 
 <div>box seven</div> 
 <div>box eight</div> 
 <div>box nine</div> 
 <div>box ten</div> 
</div> 
 
</body> 
</html>

birdbrain

greencode

9:05 pm on Oct 4, 2010 (gmt 0)

So does the distance always have to be equal from the margin of the container and then the subsequent divs within? Is it not possible to have say a 10px margin on the container and then a 40px right margin on those divs within? Obviously that would then push the final right margin to be 50px which is something I wouldn't want.

Style last div

greencode

birdbrain

greencode

birdbrain

greencode

sanji41

greencode

sanji41

greencode

enigma1

greencode

birdbrain

greencode

birdbrain

greencode

birdbrain

greencode

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week