text not wrapping around navigation

Question

Violet_82 89 Posting Whiz in Training

13 Years Ago

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

web-design

3 Contributors
4 Replies
125 Views
3 Days Discussion Span
Latest Post 13 Years Ago Latest Post by Violet_82

All 4 Replies

teedoff 3 Posting Pro

13 Years Ago

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.

Edited 13 Years Ago by teedoff 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.

webdesignpa 0 Newbie Poster · Answer 1 · 2011-01-27T19:37:19+00:00

Apply this CSS on Text div it automatically arrange one after.

Violet_82 89 Posting Whiz in Training · Answer 2 · 2011-01-28T19:26:33+00:00

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?

Violet_82 89 Posting Whiz in Training · Answer 3 · 2011-01-30T22:20:13+00:00

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

text not wrapping around navigation

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers