Hi ya, me again.
I have done some more work on my website http://www.antobbo.webspace.virginmedia.com/webediting/our_web_standards.htm but I am having an issue with the content being pushed down by the navigation.
Now, I read few tutorials on float but I don't seem to be able to find the answer there. I presume it is a float issue so I have tried few more things like trying to float the text to the right, but sill same result, the text stays below the navigation, and in all the browsers. I am not quite sure what I am missing here, any hint please?
thanks
Violet_82 89 Posting Whiz in Training
webdesignpa 0 Newbie Poster
Apply this CSS on Text div it automatically arrange one after.
<div style="float:left;width:according your need;">
Violet_82 89 Posting Whiz in Training
Hi there thanks, I tried that but it doesn't seem to work. here's what I have:
page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Web editing - Our web standards</title>
<link rel="stylesheet" type="text/css" href="style.css" >
</head>
<body>
<!-- BANNER STARTS HERE -->
<div id="banner">
<h1>Web editing</h1>
</div>
<!-- BANNER ENDS HERE -->
<!-- TOP NAVIGATION STARTS HERE -->
<div id="topnav">
<ul>
<li><a href="home.htm">Home</a></li>
<li><strong>Our web standards</strong></li>
<li>Livelink issues and fixes</li>
<li>How to's</li>
<li>Do's and don'ts</li>
<li>Reference</li>
</ul>
</div>
<div id="horizontal_line">
<hr>
</div>
<!-- TOP NAVIGATION ENDS HERE -->
<!-- LEFT HAND SIDE NAVIGATION STARTS HERE -->
<div id="navigation">
<ul>
<li><a href="headings.htm">Headings</a></li>
<li>Documents</li>
<li>Content</li>
<li>Links</li>
<li>Images</li>
</ul>
</div>
<!-- LEFT HAND SIDE NAVIGATION ENDS HERE -->
<!-- MAIN CONTENT STARTS HERE -->
<div class ="heading_paragraph_navigation">
<h2>Web standards</h2>
</div>
<div style="float:left;width:650px" class="text_navigation">
<p> The Web Standards are really what help us to make sure that the information on our website is usable, consistent and up to date.<br><br>
Our editors periodically check the website for error and inconsistency and when they find some problem (depending on the type of the problem) will usually get in touch with the relevant departmenr and discuss the matter.<br><br>
Common errors that we come across quite often concern headings, text, documents, images and links.
</p>
</div>
<!-- MAIN CONTENT ENDS HERE -->
</body>
</html>CSS:
*
{
margin:0;
padding:0;
}
h1
{
text-align:left;
font-size: 1.7em;
font-family: Arial, Verdana, sans-serif;
}
#banner
{
background:#81A594 url(typewriter.jpg);
background-repeat:no-repeat;
background-position:right;
height:120px;
padding:10px 50px 0 200px;
}
/*This is for the left hand side navigation */
#navigation ul /* for the navigation, foreground is a2c1b2 and bg is f5d9d7*/
{
list-style:none;
padding:0;
border:0;
margin:4em 0 0 0;
}
#navigation ul li
{
background: #f4d8c7 url("box.jpg") repeat-x scroll center bottom;
width: 10em;
display: block;
text-decoration: none;
text-align: center;
font-family: Arial, Verdana, sans-serif;
padding:10px 0 10px 0;
}
/*This is the top navigation */
#topnav ul
{
list-style: none;
margin-left:1em; /*to have some space on the left of the top navigation, but it is rendered differently in IE and firefox */
padding-left:0; /*the above problem is resolved adding the padding. Firefox and chrome seem to add some extra padding on their own */
}
#topnav li
{
float: left;
margin:1em 1.3em 0 0; /*bottom margin is because I want some space between the top navigation and the horizontal line but it is rendered differently in IE and firefox */
font-family: Arial, Verdana, sans-serif;
}
body
{
background-color:#E6E6DC;
}
/* Horizontal line */
#horizontal_line
{
clear:both;
color:#81a594;
background-color:#81a594;
height:0.35em;
width:46.8em;
float:left;
margin-top:0.35em;
border-style:none; /*Firefox seems to have a little border, so I removed it altogether */
}
.heading_paragraph
{
clear:both;
text-align:center;
padding:3px 0 0 0;
margin:0 0 0 0;
}
.text
{
margin-right:75px;
margin-left:75px;
}
.heading_paragraph_navigation
{
text-align:center;
}
.text_navigation
{
margin-right:75px;
margin-left:275px;
}
a:link {text-decoration: none;}
a:active {text-decoration: none;}
a:hover { text-decoration: underline; color: #ff0000; }I am not quite clear what the issue is, is it because my text has no definite size?
teedoff 3 Posting Pro
Hi Violet, I quickly worked up a basic two column design like you have to show you the bare minimum you need to float divs properly. Study the code and then apply it to your site. You have alot of unneccessary code in your css, and can probably use this code to "start over" so to speak. Hope this helps!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#wrapper {
width: 960px;
margin: 0 auto;
}
#navigation {
width: 300px;
float: left;
background-color: #099;
}
#mainContent h2 {
margin: 0 auto;
}
#mainContent p {
padding: 25px;
}
#mainContent {
width: 600px;
background-color: #CCC;
margin-left: 325px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="navigation">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
<div id="mainContent">
<h2>Heading 2 here</h2>
<p>Your paragraphs go here</p>
</div>
</div>
</body>
</html>I gave both divs a background color to show how they are floated and positioned.
Violet_82 89 Posting Whiz in Training
Teedoff, thanks that's a really good example, now it is a bit clearer. So basically, what I need to do is to create a div (div1) that contains my navigation (div2) and text (div3). If div1 is 900px wide, div2's and div3's width must be contained within div1's width. If it is bigger, problems start happen.
Div1 (in your case wrapper) has got
margin: 0 auto;which basically centers the box. Div2 (navigation) is floating left. I would have thought that div3 (mainContent)to slot in properly had to be floating right...
Also one more thing: in your code you said
#mainContent h2 { margin: 0 auto; }
Now, I would have thought that the h2 would have been centered in respect of the mainCOntent div and not in respect of wrapper div. How's that?
About many bits of my code being unnecessary, well yes, I think that's because I have been keeping adding things to the CSS so there are things that probably shouldn't be there, I will try to tidy this up, thanks
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.