Float Messing up Design [Archive]

Comprox

03-20-2007, 07:32 AM

Ok, first off the last site I ever made was years ago and yes, it was with tables. Of course I get dragged back into this, for a job, so I am learning how to do it in CSS on the fly. The code is a big hack-job, I've had a few other people help me get where I am so far and it's missing font styling (want to get the layout done first).

On that note, the site is almost done except it needs a logo on the left side. My finished site should look something like this:

http://www.readyroom.org/comprox/gearup/mainBeige.jpg

I can get the gist of the site to look fine in Firefox and IE: http://www.readyroom.org/comprox/gearup/

But once I add the logo, FF and IE break in different fashions: http://www.readyroom.org/comprox/gearup/index2.html

I think it's something to do with the fact that the 'frame' div is actually wider than the background (which allows the contact box to flow over the right side), but it even messes up the nav buttons in IE, which I have no clue why.

I've tried moving the logo around and floating it inside the frame, outside, bottom, aligned to top and so forth, but it always breaks similar to what you currently see.

Is there an easy fix to this?

Thanks!

jlhaslip

03-20-2007, 09:54 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
Gear Up Construction
</title>
<style type="text/css">
/*<![CDATA[*/
* html {
margin: 0 auto;
padding: 0;
}

body {
text-align:center;
background-image:url(images/ContentBeigeBG.gif);
background-position:center;
background-repeat: repeat-y;
width:765px;
margin: 0 auto;
}

#frame {
margin: 0 auto;
width:765px;
padding:0px;
margin-left: 125px:
text-align:left;
display: inline;
}

#miniflex {
width: 550px;
font-size: small; /* could be specified at a higher level */
margin: 0;
padding: 0 10px 0 90px;
float:left;
}

#miniflex li {
float: left;
margin: 0;
padding: 0;
display: inline;
list-style: none;
}

#miniflex a:link, #miniflex a:visited {
float: left;
font-size: 85%;
line-height: 20px;
font-weight: bold;
margin: 0 10px 0 10px;
text-decoration: none;
padding-top: 6px;
color: #5fa280;
}

#miniflex a.active:link, #miniflex a.active:visited, #miniflex a:hover {
border-top: 4px solid #006633;
padding-top: 2px;
color: #006633;
}

.logo {
float: left;
position:relative;
}

#header {
padding-left: 25px;
padding-bottom: 0px;
}

#content {
padding: 0px 0px 0 20px;
margin-top: 30px;
display: inline;
position: static;
width: 650px;
}

#content_wrap {
text-align: left;
}

.contactcontain{
width:200px;
float:right;
padding: 5px 5px 5px 5px;
}

.contact {
display:block;
}

.contact {
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#e2cc77;
}

.contact1 {
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #f2e9c4;
border-right:1px solid #f2e9c4;
background:#e9d899;
}

.contact2 {
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #fcf9f1;
border-right:1px solid #fcf9f1;
background:#e7d590;
}

.contact3 {
margin-left:1px;
margin-right:1px;
border-left:1px solid #e7d590;
border-right:1px solid #e7d590;
}

.contact4 {
border-left:1px solid #f2e9c4;
border-right:1px solid #f2e9c4;
}

.contact5 {
border-left:1px solid #e9d899;
border-right:1px solid #e9d899;
}

.contactfg {
background:#e2cc77;
padding: 10px;
}

/*]]>*/
</style>

</head>


<body>
<div id="frame">

<img src="index2_files/gearuplogo.gif" alt="insert Alternate text here" title="Title text here" class="logo" />
<div id="header">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase=
"http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="flashLogo" align="middle" height="151" width="635">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="images/header_main_beige.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="index2_files/header_main_beige.swf" quality="high" bgcolor="#FFFFFF" name="flashLogo" allowscriptaccess="sameDomain" type=
"application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="middle" height="151" width="635" />
</object>

</div>
<ul id="miniflex" >
<li>
<a href="#" class="active">Home</a>
</li>
<li>
<a href="#">Paving Stones</a>
</li>

<li>
<a href="#">Concrete Curbing</a>
</li>
<li>
<a href="#">Retaining Walls</a>
</li>
</ul>
<div class="contactcontain">
<b class="contact"></b>
<div class="contactfg">
Contact:<br />
780-866-8500<br />
Email:<br />
email@gearupconstruction.ca
</div><b class="contact"> </b>
</div>
<div id="content_wrap">
<div id="content"><p>At Gear Up Construction, we specialize in progressive “hardscaping” for your home or business. The term “hardscaping“ refers to the fact that we only
supply products and services that use concrete or rock. These products are environmentally friendly as they require no water to maintain. We offer a
wide variety of services that are all based on the same theory, that is we are trying to help you with achieving a maintenance free solution for the
exterior of your property. All of our services are both commercial and residential .We pride ourselves on our service and would like to have the
opportunity to work with you. Please look through the web site and give us a call with any questions or concerns. We offer free estimates, Thank you.</p>
</div>
</div>
</div>
</body>
</html>

Played with the widths, put a display-inline for IE6 and the float bugs, added a paragraph tag to the content div, changed a couple of classes to id's.
Still has a couple of warnings. The validator doesn't like the embed tag for the flash object or the empty <b> tags. Google might find a solution for that.
Changed the doctype to html 4 Loose to try to solve those two warnings, but it didn't work.
And I somehow messed up your nice rounded corners. You might be able to get them back. I am not familiar with the technique and it is past my bedtime, :) , so I will leave you that to sort out. Sorry.

By the way, which part of the Great White North are you from? BC here. Near lake Louise, Alta. On the border of Alberta.

ronaldb66

03-20-2007, 09:58 AM

Since the logo turned on its side is more of an adornment, I'd suggest implementing it as a background image.

Create an outer container to accept the logo as a non-repeated background image; make this container wider than the main content one to expose the logo.
Then create an inner content container, with the borders and the tan background as a vertically repeating background image; alignment of content and the floating "contact" box could be done with margins and/or padding.

Comprox

03-20-2007, 06:03 PM

Well, what I have done so far is (results: http://www.readyroom.org/comprox/gearup/index2.html ):

1 - moved the background of the content onto the 'frame' tag
2 - make the logo the site background itself

This has fixed my old problem, but made 1 new one. (edit solved one, down to one problem)
1 - I can't get the background to be 100% height of the page, regardless if the content is or not. I put height=100% in the body tag as well (from the stuff I read), but that doesn't seem to do it.

And I live in Alberta, nearish Edmonton. Not Calgary, ewww :P

jlhaslip

03-20-2007, 08:09 PM

Add to the top of your css:

* html { margin:0; padding:0;}
html, body {
height: 100%;
}
#frame { /* div you want to stretch */
min-height: 100%;
}
body {
text-align:center;
background-image: url(images/gearuplogo.gif);
background-repeat: no-repeat;
background-position: top center;
margin: 0px;
}

May need to add this to the bottom. I have a stand-alone version of IE6 which seems to not need it, but a full version might:


Spent 12 years in Edmonton. Nice place.

Comprox

03-20-2007, 11:29 PM

You are awesome sir, thank you!