My Div's not floating properly ;-)

[tamilsweet]

Hi,
Please have a look at the attached image.:confused:

I would like the right side block to be moved up.

HTML:


<div align="center">
<div id="footer_block">
<div id="footer_left">
<img border="0" src="img/footerleftblue.gif" width="16" height="55" />
</div>
<div id="footer_center">
<div id="footer_center_top">
<p align="center" id="footer_para" class="crfooter">

<a href="http://www.mysitenetwork.com">Home</a>&nbsp;|&nbsp;
<a href="nyc-contractors-find-how.html">How It Works</a>&nbsp;|&nbsp;
<a href="nyc-contractors-find-aboutus.html">About Us</a>&nbsp;|&nbsp;
<a href="nyc-contractors-find-start.html">Find a Contractor</a>&nbsp;|&nbsp;
<a href="nyc-contractors-find-faq.html">FAQ</a>&nbsp;|&nbsp;

<a href="nyc-contractors-find-contactus.html">Contact Us</a>&nbsp;|&nbsp;
<a href="http://www.nyc-contractor-leads.com">Contractors - Join Here</a>&nbsp;
</p>
</div>
<div id="footer_center_bottom_left" class="crfooter">
&nbsp;
<a href="nyc-contractors-find-privacypolicy.html">Privacy Policy</a>&nbsp; |&nbsp;

<a href="nyc-contractors-find-termsofservice.html">Terms and Conditions </a>
</div>
<div id="footer_center_bottom_right">
<p align="right"><font class="sidebartext">&copy; 2008 mysitenetwork.com</font></p>
</div>
</div>
<div id="footer_right">

<img border="0" src="img/footerrightblue.gif" width="16" height="55" />
</div>
</div>
</div>


CSS:

#footer_block {
background-color : #5E738C;
height : 55px;
width : 756px;
border : 1px solid green;
}

#footer_left {
background-color : #5E738C;
float: left;
height : 55px;
width : 16px;
border : 1px solid black;
}

#footer_right {
clear : none;
background-color : #FFFFFF;
float: right;
height : 55px;
width : 16px;
border : 1px solid black;
}

#footer_center {
margin-left : 20px;
margin-right : 20px;
height : 55px;
width : 713px;
border : 1px solid red;
}

#footer_center_top {
border : 1px solid blue;

height: 36px;
width: 713px;
}

#footer_center_bottom_left {
border : 1px solid yellow;
float: left;
height: 19px;
width: 295px;
}

#footer_center_bottom_right {
float: right;
border : 1px solid aqua;
height: 19px;
width: 382px;
}

#footer_center_bottom_right p {
margin: 1px;
}

.crfooter {FONT-SIZE: 8PT; COLOR: #FFFFFF; text-decoration : none}
.crfooter A:link
{FONT-FAMILY: Arial, Helvetica; FONT-SIZE: 8PT; COLOR: #FFFFFF; text-decoration : none}
.crfooter A:active
{FONT-FAMILY: Arial, Helvetica; FONT-SIZE: 8PT; COLOR: #FFFFFF; text-decoration : none}
.crfooter A:visited
{FONT-FAMILY: Arial, Helvetica; FONT-SIZE: 8PT; COLOR: #FFFFFF; text-decoration : none}
.crfooter A:hover
{FONT-FAMILY: Arial, Helvetica; FONT-SIZE: 8PT; COLOR: #FFFFFF; text-decoration : none}


How do I move the right side curved image up!!
Please help!!!
:)

[abduraooft]

You need to place your floated right element before all the non-floated elements in markup order. Try<div align="center">
<div id="footer_block">
<div id="footer_left">
<img width="16" height="55" border="0" src="img/footerleftblue.gif"/>
</div>
<div id="footer_right">

<img width="16" height="55" border="0" src="img/footerrightblue.gif"/>
</div>
<div id="footer_center">
<div id="footer_center_top">
<p align="center" class="crfooter" id="footer_para">

<a href="http://www.mysitenetwork.com">Home</a> |
<a href="nyc-contractors-find-how.html">How It Works</a> |
<a href="nyc-contractors-find-aboutus.html">About Us</a> |
<a href="nyc-contractors-find-start.html">Find a Contractor</a> |
<a href="nyc-contractors-find-faq.html">FAQ</a> |

<a href="nyc-contractors-find-contactus.html">Contact Us</a> |
<a href="http://www.nyc-contractor-leads.com">Contractors - Join Here</a>
</p>
</div>
<div class="crfooter" id="footer_center_bottom_left">

<a href="nyc-contractors-find-privacypolicy.html">Privacy Policy</a> |

<a href="nyc-contractors-find-termsofservice.html">Terms and Conditions </a>
</div>
<div id="footer_center_bottom_right">
<p align="right"><font class="sidebartext">© 2008 mysitenetwork.com</font></p>
</div>
</div>


</div>
</div>
BTW align="center" is depreciated, you could use a CSS text-align:center; instead.
Again to center a fixed width element (#footer_center in your case), no need to put a calculated margins to it. margin-left:auto; margin-right:auto or just margin:0 auto; would do the trick (provided a text-align:center; should be given for it's parent element to work it in stupid IEs)!

[tamilsweet]

Thanks!!! :-)
That worked......:thumbsup:

But IE still gives the problem.

Please have a look at the attached image.

CSS:

#footer_block {
text-align : center;
background-color : #5E738C;
height : 55px;
width : 756px;
border : 1px solid green;
}

#footer_left {
background-color : #5E738C;
float: left;
height : 55px;
width : 16px;
border : 1px solid black;
}

#footer_right {
background-color : #FFFFFF;
float: right;
height : 55px;
width : 16px;
border : 1px solid black;
}

#footer_center {
margin : 0 auto;
height : 55px;
width : 713px;
border : 1px solid red;
}

#footer_center_top {
border : 1px solid blue;
height: 36px;
width: 713px;
}

#footer_center_bottom_left {
border : 1px solid yellow;
float: left;
height: 19px;
width: 295px;
}

#footer_center_bottom_right {
float: right;
border : 1px solid aqua;
height: 19px;
width: 382px;
}


HTML:


<div align="center">
<div id="footer_block">
<div id="footer_left">
<img border="0" src="img/footerleftblue.gif" width="16" height="55" />
</div>
<div id="footer_right">
<img border="0" src="img/footerrightblue.gif" width="16" height="55" />
</div>

<div id="footer_center">
<div id="footer_center_top">
<p text-align="center" id="footer_para" class="crfooter">
<a href="http://www.mysitenetwork.com">Home</a>&nbsp;|&nbsp;
<a href="nyc-contractors-find-how.html">How It Works</a>&nbsp;|&nbsp;
<a href="nyc-contractors-find-aboutus.html">About Us</a>&nbsp;|&nbsp;

<a href="nyc-contractors-find-start.html">Find a Contractor</a>&nbsp;|&nbsp;
<a href="nyc-contractors-find-faq.html">FAQ</a>&nbsp;|&nbsp;
<a href="nyc-contractors-find-contactus.html">Contact Us</a>&nbsp;|&nbsp;
<a href="http://www.nyc-contractor-leads.com">Contractors - Join Here</a>&nbsp;
</p>

</div>
<div id="footer_center_bottom_left" class="crfooter">
&nbsp;
<a href="nyc-contractors-find-privacypolicy.html">Privacy Policy</a>&nbsp; |&nbsp;
<a href="nyc-contractors-find-termsofservice.html">Terms and Conditions </a>
</div>
<div id="footer_center_bottom_right">

<p text-align="right"><font class="sidebartext">&copy; 2008 mysitenetwork.com</font></p>
</div>
</div>
</div>
</div>

[abduraooft]

Try reducing the width of center div say
#footer_center {
margin-left : auto;
margin-right : auto;
height : 55px;
width : 710px;
border : 1px solid red;
}
And no need to give width for inner block elements, unless you need to set a less value than it's parent. So remove width: 713px; from #footer_center_top

I recommend you to remove <div align="center"></div> completely, since you have another wrapper <div id="footer_block">.

[tamilsweet]

Great!!!
That fixed the IE issue.......
:-)

Thanks a lot for the help........

Will come back with more issues soon..... ;-)
lol.......
I'm learning css :-)

[tamilsweet]

I removed the "border" style of all the tags.
Now it looks perfect in FF, but not so in IE and Opera.
Have a look the attachments.

[CSS]

#footer_block {
text-align : center;
background-color : #5E738C;
height : 55px;
width : 756px;
}

#footer_left {
background-color : #FFFFFF;
float : left;
width : 16px;
}

#footer_right {
background-color : #FFFFFF;
float : right;
width : 16px;
}

#footer_center {
margin : 0 auto;
width : 710px;
}

#footer_center_top {
height : 33px;
padding : 2px;
}

#footer_center_bottom_left {
float : left;
height : 22px;
width : 295px;
}

#footer_center_bottom_right {
float : right;
height : 22px;
width : 195px;
}

#footer_center_bottom_right p {
margin : 0;
}

[abduraooft]

Sorry, we can't judge by viewing the screen shot. We need to see the complete html+CSS for that page, or a link would be more useful.

[tamilsweet]

Ok.
Here is the link to the page.
http://www.locateserv.com/test/footer.html

Also, noticed something strange......
may be problem with my FF......

I'm unable to see the page in FF.
I then resized the page and I'm able to see it then?? :confused:

[abduraooft]

You need to add a proper DOCTYPE (http://www.alistapart.com/articles/doctype/) to your document at the very beginning, I recommend
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Then remove top padding from footer_center_top or change it like
#footer_center_top {
height : 33px;
padding : 0 2px;
}
apply display:block; to imgs like div#footer_left img, div#footer_right img{display:block}
Adding a style *{
margin:0;padding:0
} would also be useful (to nullify all default margins and paddings).
good luck!

[tamilsweet]

Excellent.......
Thanks a lot....

why the padding for top and bottom from the footer_center_top removed?
Also, do we need to add display property to all the img tags which fill the div it contains?

I added the DOCTYPE as you said. :-)

[tamilsweet]

Please have a look at
http://www.locateserv.com/test/header.html

In the left you can see a logo. Above that a grey background.
I want that grey background to appear to the entire width.

Please help!

[abduraooft]

Ha.. that's funny, I don't see any grey background image rather than a strip saved along with logo http://www.locateserv.com/test/img/logo.jpg. Have I missed anything? Are you trying to get an appearance like
#top {
background:#999;
margin:auto;
width:756px;
}

[rangana]

It's indeed part of logo.jpg. #999 is a bit darker, Maybe its #aaa;

[tamilsweet]

Sorry, that was my mistake.
I didnt noticed that the logo itself containing a grey strip.

If I use a background color then it fills the entire div with grey color.
I just want the top to contain a grey strip.
See the attached image.

Instead of black strip(i.e. in image) I want a grey strip.
what I'm trying is to have "img/top_bg.jpg" repeated in x-direction. :)

[abduraooft]

#top {header.css (line 7)
background:url(img/top_bg.jpg) repeat-x top;
margin:auto;
width:756px;
} ??
BTW, you don't need that 2 X 84 image to give a border like that. Just take that grey portion in height and save by giving only 1px width.

[tamilsweet]

Woooooooooooooooooooow
That works :-)
Got exactly what I want......

[tamilsweet]

#top {header.css (line 7)
background:url(img/top_bg.jpg) repeat-x top;
margin:auto;
width:756px;
} ??
BTW, you don't need that 2 X 84 image to give a border like that. Just take that grey portion in height and save by giving only 1px width.

Ok.
Means, i have to edit the image and reduce the width to 1px and height equal to grey part. Right?

[abduraooft]

Ok.
Means, i have to edit the image and reduce the width to 1px and height equal to grey part. Right? Yes; that would be enough. Since the rest of the header's portion is supposed to be white, you may add it expicitely(to assure cross browser suppoert) like background:url(img/top_bg.jpg) #fff repeat-x top;

[tamilsweet]

Ok. I will do that.

One more fix!!! ;-)

Please have a look at
http://www.locateserv.com/test/sidebar.html

You can see
1. "JoinHere" image
2. "Top 10 Projects" image
3. ---->a list
4. "Articles & News" image
5. ---->a list

how do i reduce the gap between 2 & 3.
It should be equal to the gap between 3 & 4.

Similarly between 1 & 2.

[abduraooft]

Try
<div class="subhead">
<img width="167" height="41" src="img/top10img.gif"/>
</div>

div.subhead img{
display:block;
}
(http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps )

[tamilsweet]

Excellent!!!
As usual..........;-)

Thanks a lot...... :-)

[tamilsweet]

Hi,
Please have a look at
http://www.locateserv.com/test/home.php

CSS: http://www.locateserv.com/test/content.css

The page looks perfect in FF and Opera, but not in IE.
Unable to find the problem :confused:

[abduraooft]

#home_list_right {
float:right;
margin-right:65px;
padding-left:10px;
line-height:1.8em;
width:125px;
}

#home_list_center {
margin-left:160px;
line-height:1.8em;
width:135px;
}
Experiment on these values, you could find a solution.
BTW, any problems with a simple
#home_content_main div{
float:left;
width:33%;
} rather than all those separate left,right and center rules ?

[tamilsweet]

Thanks :-)
Yes, the only problem is that I dont know that it can be done in a simpler way. ;-)

I changed as you said.
Also, I'm trying to center align the "About Us" box at the bottom of the page.
But it remains slightly moved to the right!?

[tamilsweet]

I have few div tags with background specified for them.........
like....
#home_logo_about {
width:110px;
height:83px;
float:left;
margin:40px 0px 0px 10px;
background:url(img/logo_about.gif);
}

but the background image is not showing up in any of the browsers

[abduraooft]

Hmm... now it looks more like table based layout, a lot of tags and a lot of invalid/depreciated elements. Just have a look by adding a rule like div{border:1px solid #000;}. There might be some misplaced close tags. See the errors in your page (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.locateserv.com%2Ftest%2Fhome.php&charset=%28detect+automatically%29&doctype=Inline&group=0)
background:url(img/logo_about.gif);...
but the background image is not showing up in any of the browsers
If it's a logo you need to place it by img, rather than an extra div for this.

[tamilsweet]

No table
No invalid/depreciated elements
No misplaced code tags.
But still not showing up.......

Few of the backgrounds are borders to the div.
(hi abduraooft, sent you a PM)

[maxvee8]

try:

background-image:url(img/logo_about.gif);

or if the first doesnt work

try:

background-image:url(/img/logo_about.gif);

[tamilsweet]

Thanks..

This worked.....

background-image:url(/img/logo_about.gif);