...

View Full Version : Justify elements within a div



AmmarIdris88
11-06-2011, 02:56 AM
Hi,

I have a large div container which contains several smaller div elements on a couple of lines and I'm having trouble figuring out how to justify them. Much like how you would justify text, I want the inner div's to be fully justified. Can this be done purely with css and without JavaScript?

Thank you.

Excavator
11-06-2011, 03:08 AM
Hello AmmarIdris88,
By justified, do you mean each element to be centered?
To center an element you need three things:

a valid DocType
an element with a width
that elements right/left margins set to auto


Try this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #FC6;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
}
#small,
#medium,
#large {
height: 200px;
margin: 5px auto;
background: #ccc;
}
#small {width: 200px;}
#medium {width: 300px;}
#large {width: 400px;}
</style>
</head>
<body>
<div id="container">
<div id="small"></div>
<div id="medium"></div>
<div id="large"></div>
<!--end container--></div>
</body>
</html>

AmmarIdris88
11-06-2011, 03:23 AM
Hi Excavator,

Thanks for the super fast reply.

No, I didn't mean center the divs. Instead, what I had was this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #FC6;
}
#container {
width: 800px;
height:600px;
margin: 30px auto;
background: #999;
}
#small,
#medium,
#large {
height: 200px;
margin: 5px auto;
background: #ccc;
display: inline-block;
}
#small {width: 200px;}
#medium {width: 200px;}
#large {width: 200px;}
</style>
</head>
<body>
<div id="container">
<div id="small"></div>
<div id="medium"></div>
<div id="large"></div>
<!--end container--></div>
</body>
</html>

... and what I am trying to achieve is to create an even amount of margin between each of those inner elements so that they span the entire line. Does that make sense? Kind of like how you would use text-align: justify but instead with those inner div elements.

Excavator
11-06-2011, 03:38 AM
Try floating those and playing with the margin a little.
Like this -

#small,
#medium,
#large {
height: 200px;
margin: 5px 0 0 50px;
float: left;
background: #ccc;
}

AmmarIdris88
11-06-2011, 03:45 AM
Try floating those and playing with the margin a little.
Like this -

#small,
#medium,
#large {
height: 200px;
margin: 5px 0 0 50px;
float: left;
background: #ccc;
}

Unfortunatley this won't work because the number of inner div elements will increase so I need a way to do this dynamically. I managed to do it by doing this:

#container {
text-align:justify;
width: 800px;
height:600px;
margin: 30px auto;
background: #999;
}

I used text-align:justify on the outer container and it justified the inner divs but for a reason I haven't been able to figure out it only did it for the elements on the first line.

Excavator
11-06-2011, 03:50 AM
Look at a small demo of mine - http://nopeople.com/CSS%20tips/thumbnail%20presentation/index.html

AmmarIdris88
11-06-2011, 04:00 AM
Look at a small demo of mine - http://nopeople.com/CSS%20tips/thumbnail%20presentation/index.html

Ok, so on line 10 of your css you text-align:center the wrapper which causes the inner div elements to center. Thats exactly what I'm trying to achieve except that instead of centring those elements I need them to be fully justified.

P.S. cool example :D.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum