homepage Welcome to WebmasterWorld Guest from 54.226.161.112
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Style last div
greencode




msg:4172533
 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




msg:4172670
 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




msg:4172686
 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




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

No problem. you're very welcome. ;)


Further reading:-

birdbrain

greencode




msg:4210529
 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




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

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

greencode




msg:4210758
 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




msg:4210894
 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




msg:4211052
 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




msg:4211075
 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




msg:4211087
 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




msg:4211103
 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




msg:4211194
 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




msg:4211200
 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




msg:4211202
 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




msg:4211210
 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




msg:4211250
 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved