Welcome to WebmasterWorld Guest from 23.22.220.37

Forum Moderators: not2easy

Message Too Old, No Replies

Style last div

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

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 183
votes: 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?
10:16 am on July 19, 2010 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 948
votes: 4


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
11:17 am on July 19, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:July 4, 2007
posts:183
votes: 0


Thanks birdbrain. Works superbly well. Didn't realise you could do this. I love learning new stuff ;-)
11:43 am on July 19, 2010 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 948
votes: 4


No problem. you're very welcome. ;)


Further reading:-

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

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 183
votes: 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.
1:49 pm on Oct 3, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:July 27, 2010
posts: 54
votes: 0


please provide your code, and html. and other details as well.
4:44 pm on Oct 3, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 183
votes: 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>
2:44 am on Oct 4, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:July 27, 2010
posts: 54
votes: 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
2:12 pm on Oct 4, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 183
votes: 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
2:44 pm on Oct 4, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Apr 30, 2007
posts:1394
votes: 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.
3:04 pm on Oct 4, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 183
votes: 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.
3:42 pm on Oct 4, 2010 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 948
votes: 4


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
6:53 pm on Oct 4, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 183
votes: 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>
7:16 pm on Oct 4, 2010 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 948
votes: 4


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
7:29 pm on Oct 4, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 183
votes: 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!
8:10 pm on Oct 4, 2010 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 948
votes: 4


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
9:05 pm on Oct 4, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 183
votes: 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.