Log in

View Full Version : 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:



.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">&nbsp;</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:


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 :)