Floating divs probelm

**sivlock** · 03-03-2009, 10:44 AM

I am using a div floating it left and I have set the width in the CSS yet when I add my text it just stretches the div box in one line and does not flow underneath each other like it should I also have set the margins and paddings to the position i want it yet still flows on one line. Any help people?

**X96 Web Design** · 03-03-2009, 03:33 PM

Can you post your code so we have something to work with? From what I understand, the text in your DIV is not wrapping?

Are you using Firefox or Internet Explorer? Because IE has it's own set of CSS rules that are different from the rest of the world's. Be sure you've set it up like this:

Code:

.mybox {
display: block; /* Make sure this is here. */
width: 600px;
text-wrap: normal; /* This tells the text to wrap at the end of the width */
}

Hope that helps!

**sivlock** · 03-03-2009, 03:53 PM

Cheers for that gotta wait til i get home to try anything if i can't work it out again I will put the code up later tonight!

**sivlock** · 03-03-2009, 06:33 PM

Still didn't work i've posted the code below if anyone can help? Cheers.

<body>
<table width="875" border="0" cellpadding="0" cellspacing="0" id="main_container">
<tr>
<td valign="top"><div><img src="images/(IMAGE HERE).jpg" alt="" width="174" height="128" /></div>
<div><a href="index.html"><img src="images/(IMAGE HERE).jpg" alt="" width="174" height="36" border="0" /></a></div>
<div><img src="images/(IMAGE HERE).jpg" alt="" width="174" height="141" /></div></td>
<td valign="top"><img src="images/(IMAGE HERE).jpg" width="711" height="50" alt="" /><div id="main_background_index"><div id="main_content_index"><h1>Welcome </h1>
<p>gfffffffffffffffffhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
</div>
</div></td>
</tr>

<tr>
<td colspan="2"> </td>
</tr>
</table>
</body>
</html>

body {
margin: 0;
padding: 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
p {
line-height: normal;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
display: list-item;
}

h1 {
margin: 0px;
padding: 0px;
font-size: 18px;
}

#main_container {
width: 880px;
margin: 0 auto 0 auto;
text-align: left;
}
#main_background_index {
background-image: url(../images/main_background_index.jpg);
background-repeat: no-repeat;
height: 704px;
width: 100%;
white-space: normal;
}
#main_content_index {
margin-top: 125px;
margin-left: 55px;
margin-right: 55px;
float: left;
width: 600px;
margin-bottom: 5px;
padding: 0px;
display: block;
text-wrap: normal;
}

**X96 Web Design** · 03-04-2009, 05:48 AM

It works fine for me... If the gfffff repeating thing is actually the text you're using, then use:

Code:

text-wrap:break-word

This way it'll break the "word" in half when it reaches the end of the DIV.

But if it's just normal text, it works fine when I test it...

Hope that helps!

**sivlock** · 03-04-2009, 09:42 AM

I wont get to try that until later this evening but it looks like it mite work just had a little demo just now. I've only tried it in Firefox at the mo btw. Cheers

**sivlock** · 03-04-2009, 10:44 PM

Seems ok with blocks of text pasted in keeps the width. Anyhow thanks for your time and help

Thread: Floating divs probelm

Thread Tools

Search Thread

Floating divs probelm

The Following User Says Thank You to X96 Web Design For This Useful Post:

heres how the code goes at the moment

Bookmarks

Bookmarks

Posting Permissions