PDA

View Full Version : CSS Problem floating divs in line



Richard Welch
Feb 26th, 2010, 06:54 PM
Hi
I need help with aligning three divs in a line, if viewed with Moz, it doesn't show it to be aligned. My website is: http://www.exigotranslations.com (look at bottom of index page).

CSS is:
#infos div {
float: left;
min-height: 10em;
width: 16em;
margin: 3em 0.4em 1em 0em;
border: solid 1px #e5e5e5;
position: relative;
padding: 1px 5px 20px 5px;
font-size: 99%;
background-color: #FAFAFA;
}
* html #infos div {height: 10em;}
#infos div img {
float: left;
margin: 0.2em 0.4em 0.2em 0.2em;
border: solid 1px #e5e5e5;
}
#infos div h2 {
font-size: 13px;
color: #A2B5CD;
}
#infos div h3 {
font: bold 1.2em 'Trebuchet MS', Tahoma, Sans-serif;
color: #728D26;
margin-top: 5px;
padding: 5px 5px 0px 25px;

}
#infos p {margin-bottom: 0;}
#infos div p a {
clear: left;
position: absolute;
bottom: 3px;
left: 3px;
color: #999;
}
#infos div p a:visited {
color: #E8E8E8;
}
#infos div p a:hover {
color: #E8E8E8;
background-color: #A2B5CD;
}

Can anyone help as to what I am doing wrong?

Thanks,

Richard

skywalker2208
Feb 26th, 2010, 07:06 PM
Add



#infos {
clear: both;
}

drhowarddrfine
Feb 26th, 2010, 07:09 PM
Mozilla is performing correctly, as are all the modern browsers. What you are seeing is a bug in IE which is not a modern browser. To make all the other browsers imitate the IE bug, add 'overflow:auto' to #langmodule. Parent elements are never to expand to contain floated elements.

Richard Welch
Feb 27th, 2010, 12:19 AM
Hi drhowarddrfine,

Thanks, worked brilliantly. Also have another problem with CSS at page:http://www.exigotranslations.com/translation_services.htm where the textarea is not displaying where it should below map. What have I done wrong here, tried everything I know:

#translation form {
float: left;
width: 55%;
border: 1px solid #CCC;
padding-left: 10px;
}

Thanks,

Richard

skywalker2208
Feb 27th, 2010, 01:01 AM
Remove float: right from #main form.

#main form {
background:#FAFAFA none repeat scroll 0 0;
border:medium none;
float:right;
padding-top:30px;
width:42%;
}

drhowarddrfine
Feb 27th, 2010, 01:07 AM
<form> is a block level element but h2 cannot contain another block level element. Not sure of the fix yet.

EDIT: Either you changed it or I misread it but skywalker's solution will work if you adjust the padding, too.