Text reflows with window

[geko781]

Hello All,

This is my first post to this forum and I was hoping to get some help from you fine people. I have uploaded my new site www.jaymontoni.com and everything seems to be working okay so far but when i resize the window the text reflows. I want to set it up so the text will never reflow and if the browser becomes too small it just cuts the text off without reflowing—can anyone help me I need to send this to some people and can't with it working the way it does. You can really see this take place in the home page and the about section.

Thanks again for your help,

- Jay

[RGL]

Give your <div> tags fixed positions. Something like this:

<div style="position: absolute; width: 400px; left: 300px; top: 230px">

[ewallace]

I did this with your container div and got it to work fine.

.item_container
{
position:relative;
float:left;
border-left: solid 8px #999999;
padding-left: 25px;
width:392px;
top:55px;
left:80px;
}

It may need a bit of tweaking to look quite the way you want. Using margins to position it was awkward(in my opinion), and it was compressing your container to try to maintain the large right margin. Since there was no div width defined, it just squished your content in so there was room for all the blank space.
-E

[toicontien]

.item_container
{
border-left: solid 8px #999999;
margin: 55px 0 0 80px;
padding-left: 25px;
width:392px;
}

In this way, you don't have to worry about floated elements and how they interact with the document flow. The problem with this approach is Internet Explorer is in Quirks Mode where the width you set in CSS also absorbs the padding and border. So in IE-Win, your layout is 392 pixels wide. In virtually all other browsers, it is 425 pixels wide (392 + 25 + 8).

This markup structure and CSS might work a little better and avoid CSS bugs:

<div class="item_box">
<div class="item_container">
<!-- Page contents go here -->
</div>
</div>


.item_box {
margin: 55px 0 0 80px;
width: 425px;
}

.item_container {
border-left: solid 8px #999999;
padding-left: 25px;
}

On top of that, you can Fix Your Site With the Right Doctype (http://alistapart.com/stories/doctype/) to put browsers into Standards Mode where they render CSS more consistently (mainly IE-Win renders CSS more consistently).