CSS, Right Float, Wrapper or Clear problem

Question

LCYmichelle 0 Newbie Poster

13 Years Ago

I have created a simple website with my first attempt at css but seem to have problems with the right float.

Web address & css are:
Address
CSS

Browsers being viewed:
Mozilla 3.6.3
IE 8

Mozilla on my PC appears fine but IE is ok except for the inconsistent right float.

Looking at other computers the whole float on the right is very quirky (particularly with older versions of IE)

Have been clearing the cache & delete browsing history but doesn't help much, as I need to do it for every page I open.

Would love to not have to test it in IE but it seems that around 50% of viewers to my related sites are still using it.

It's driving me nuts, is there anything that can be fixed in the css?

Would be interested to know if wrapper or clear divs would make a difference? and understand why?

Thanks in advance.

browser css float web-design

3 Contributors
4 Replies
238 Views
1 Week Discussion Span
Latest Post 13 Years Ago Latest Post by LCYmichelle

All 4 Replies

drjohn 56 Posting Pro in Training

13 Years Ago

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.corporate-event.com.au%2F

27 errors. So start by correcting them, where possible.

You should not be using the center tag, use standard ways to center your layout.
i.e.
Add a <div id="wrapper"> around your entire content inside the body, and set its margin:auto; and give it a width of 750px (it doesn't work without a width). Also 750px is a bit small these days, I'd suggest 950px would be better.

After that, come back and we'll have another look.

PS some of the errors are because XHTML is very fussy, and besides, it gives you no advantages what so ever, as it gets displayed as html in IE.

Edited 13 Years Ago by drjohn because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

LCYmichelle 0 Newbie Poster · Answer 1 · 2010-06-17T12:49:32+00:00

thank you drjohn, you are very helpful. I made the changes to the site as suggested and some others and when I thought I had checked everything off on validator, I find that there are still some issues with the site when I check it off on other computer screens. My screen is small\few years old and therefore 750px is a good size but will definitely change width, once I know what I'm doing, particularly with right floats

Have also changed to HTML (instead of XHTML)

Validator results

Again, much appreciated.

tinimic 0 Newbie Poster · Answer 2 · 2010-06-19T07:58:53+00:00

Here's my approach to your design. I used HTML strict as a doctype because I am trying to learn to separate structural markup from CSS styling.

I'm fairly new to both HTML and CSS (started learning in March), but here's my approach to your design:

If you have any questions about my approach, I will be happy to elaborate.

CSS:

@charset "utf-8";
/* Browser resets */
* {
	margin: 0;
	padding: 0;
}
img {
	border: none;
	vertical-align: baseline;
}
ul, ol {
	list-style: none;
}
/* end browser resets */

body {
	background-color:#ffffff;
	font-family: Verdana, sans-serif;
	font-size: 100%;
	text-align: center;
}
h1 {
	color:#FF5F00;
	font-size: 1.5em;
	font-weight:bold;
	margin-bottom: 20px;
}
p {
	font-size:.8em;
	margin-bottom: 15px;
}
#wrapper {
	background-color:#000000;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	text-align: left;
	width:750px;
}
#top, #footer {
	text-align: center;
}
#top li {
	width:125px;
}
#main {
	height: 300px;
	padding-top: 30px;
}
#right-col {
	float:right;
	width:130px;
}
#right-col img {
	height: 67px;
	width: 130px;
}
#left-col {
	color:#FFFFFF;
	float:left;
	padding-left: 50px;
	padding-right: 50px;
	text-align:justify;
	width:520px;
}
#header img {
	height: 190px;
	width: 750px;
}
#footer {
	clear: both;
}
#footer li {
	width: 375px;
}
.brand {
	color: #ff5f00;
	font-size: 1.2em;
	font-weight: bold;
}
.nav li {
	background-color: #303030;
	display: inline;
	float:left;
	font-size: .6em;
	padding-top: 8px;
	padding-bottom: 8px;
}
a:link, a:visited {
	color: #dadada;
	font-weight: bold;
	text-decoration: none;
	text-transform:lowercase;
}
a:hover, a:active {
	color: #ff5f00;
	text-decoration: underline;
}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Corporate Event - Index</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
  <div id="top">
    <ul class="nav">
      <li><a href="http://corporate-event.com.au/index.htm">home</a></li>
      <li><a href="http://corporate-event.com.au/services.htm">services</a></li>
      <li><a href="http://corporate-event.com.au/seqld.htm">se qld</a></li>
      <li><a href="http://corporate-event.com.au/whitsundays.htm">whitsundays</a></li>
      <li><a href="http://corporate-event.com.au/sydney.htm">sydney</a></li>
      <li><a href="http://corporate-event.com.au/contact.htm">contact</a></li>
    </ul>
    <!-- end #top -->
  </div>
  <div id="header"><img src="html/Header.png" alt="corporate-event.com.au"></div>
  <div id="main">
    <div id="right-col">
      <ul>
        <li><a href="http://corporate-event.com.au/seqld.htm"><img src="html/img3.png" alt="se qld"></a></li>
        <li><a href="http://corporate-event.com.au/whitsundays.htm"><img src="html/img4.png" alt="whitsundays"></a></li>
        <li><a href="http://corporate-event.com.au/sydney.htm"><img src="html/img5.png" alt="sydney"></a></li>
      </ul>
      <!-- end #right-col -->
    </div>
    <div id="left-col">
      <h1>about us</h1>
      <p><strong class="brand">corporate-event.com.au</strong> is a website dedicated to luxury 
        on-water options available to the corporate event market. Featuring 
        gorgeous vessels based in the Gold Coast, Brisbane, Whitsundays &amp; 
        Sydney regions.</p>
      <p><strong class="brand">corporate-event.com.au</strong> can offer various options for your 
        private corporate function, Christmas party, high end business 
        meeting, mini conference, project completion or just end of business 
        day relaxation.</p>
      <!-- end #left-col -->
    </div>
    <!-- end #main -->
  </div>
  <div id="footer">
    <ul class="nav">
      <li><a href="http://luxurycharteryacht.com/">Copyright&copy; 2010 www.luxurycharteryacht.com</a></li>
      <li><a href="http://luxurycharteryacht.com/">All Rights 
        Reserved.</a></li>
    </ul>
    <!-- end #footer -->
  </div>
  <!-- end #wrapper -->
</div>
</body>
</html>

LCYmichelle 0 Newbie Poster · Answer 3 · 2010-06-23T07:29:24+00:00

Thank you tinimic for your time and attention with this post. Your approach is valid and whilst I am only just learning this myself, I should be able to compare your approach with the css I created and find out why my right float, and nav bars appear so quirky in other's browsers, but appear fine in mine, particularly in IE. Many thanks again for your assistance.

CSS, Right Float, Wrapper or Clear problem

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers