PDA

View Full Version : float left / center/ float right



BubikolRamios
Apr 19th, 2009, 08:18 AM
All three inner divs have areas that are clickable (links), I have done this (having middle, centered div positioned absolute)
but with side effect - some links are not clickable coz of z-index thing.
Any suggestion ?



<div id = 'outer_div'>
<div style = 'float:left'>
</div>
<div id = "how to center this inside outer_div">
<div>
<div style = 'float:right'>
<div>
<div>


I could give :



<div style = 'width:33%;float:left;'>

to each inner ones, I dont like that, and does not work right.

effpeetee
Apr 19th, 2009, 02:32 PM
We really need all your code. Bits of code are rarely helpful. A link to your site is even better.

Frank

Excavator
Apr 19th, 2009, 05:42 PM
Hello BubikolRamios,
Instead of absolute positioning, try centering your 3 elements like this - http://nopeople.com/CSS/3%20equal%20divs/index.html
4 here - http://nopeople.com/CSS/4-column_layout/index.html

effpeetee
Apr 19th, 2009, 05:48 PM
Hi. BubikolRamios,

Is this anything like you are wanting?

This site here. (http://exitfegs.co.uk/Sources.html)

Frank

abduraooft
Apr 19th, 2009, 05:56 PM
To make a three column layout, you don't have to apply float+width to those three columns (which may bring the box model issues, if not handled with care :)). Instead, just apply float:left; to one of them and float:right to another one. Then apply the required widths to the above floated elements. After that, put a suitable margin-left and margin-right on the one with no float. You'd need to write all the floated elements before their non-floated siblings in the markup order.


<!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>3 column</title>
<style type="text/css">
#wrapper{
border:1px solid #000;
overflow:auto;/* to clear floats*/
}
#wrapper div{
height:100px;
}
#wrapper .left{
float:left;
border:1px solid #f00;
width:32%;
}
#wrapper .right{
float:right;
border:1px solid #0f0;
width:32%;
}
#wrapper .middle{

border:1px solid #00f;
margin-right:32%;
margin-left:32%;
}
</style>
</head>
<body>

<div id="wrapper">
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</div>
</body>
</html>

Excavator
Apr 19th, 2009, 06:31 PM
You're right, of course, ab. I had an example that didn't float the middle element but I don't know what happened to it.
I've adjusted the code of the demo I originally posted - http://nopeople.com/CSS/3%20equal%20divs/index.html