DIV not working correctly

DJpaudie

I have the following code:

<div id ="lower">

<div id ="content">

<p>Main content</p>


</div>
</div>


Corresponding CSS:

#lower{
background-color: #F8F8F8;
position: absolute;
left: 0;
right: 0;
margin-top:35px;
background-repeat: repeat-y;
min-height: 500px;
margin-left:auto;
margin-right:auto;

}

#content{
padding: 50px 30px;
width: 965px;
text-align: justify;
background-color: #FFF;
margin-left:auto;
margin-right:auto;
min-height:400px;
padding-top:5px;
word-break:break-all;
word-wrap:break-word;

}


For some reason each time I attempt to put text into the content div it increases in size rather than break and jump to the next line. Keeping the size of the DIV to 965px.

If it helps I get a warning on Dreamweaver saying "width does not apply to your selection because it is not inherited" incase this helps?


Any help is appreciated. I'm tearing my hair out here!!!

omega42

Just ran your code and it looks fine ?

965px is quite large maybe you just think its going over?

DJpaudie

Looks fine in Chrome etc... but in design view of Dreamweaver it runs off the page. I usually set content to 965 wide? Never had an issue... Using a 15.6" standard screen too...

omega42

I wouldn't use design view in dreamweaver, depending on what version u have a lot of the css wont be recognised, your best to preview in browser

DJpaudie wrote: »

Looks fine in Chrome etc... but in design view of Dreamweaver it runs off the page. I usually set content to 965 wide? Never had an issue... Using a 15.6" standard screen too...

Fanny Cradock

That CSS looks a little odd. IS there an reason why you are positioning the containing element? There is also a lot of superfluous code in there. You should also consider using HTML 5 and use tags like <section> etc.

#lower{
background: #F8F8F8;
margin-top:35px auto 0;
min-height: 500px;
width:965px;
}

#content{
padding: 50px 30px;
text-align: justify;
background: #FFF;
}

DJpaudie

I need it to sit below another DIV. What unnecessary code is there?

Fanny Cradock wrote: »

That CSS looks a little odd. IS there an reason why you are positioning the containing element? There is also a lot of superfluous code in there. You should also consider using HTML 5 and use tags like <section> etc.

#lower{
background: #F8F8F8;
margin-top:35px auto 0;
min-height: 500px;
width:965px;
}

#content{
padding: 50px 30px;
text-align: justify;
background: #FFF;
}

KonFusion

can you put the site/page together in something like codepen or jsfiddle? Makes it easier for folks to help/edit.

DJpaudie

All sorted lads/ ladies thanks for the help

Fanny Cradock

DJpaudie wrote: »

I need it to sit below another DIV. What unnecessary code is there?

See my code. It's more streamlined. For example, in #content you had two separate padding rules. Note: I see a mistake in my CSS - it shouldn't be margin-top:35px auto 0; it should be margin:35px auto 0;

I generally don't use positioning unless it's necessary because I've found it can result occasionally in unpredictable behaviour. From my understanding of what you are trying to do you could simply use margin (top or bottom) on one of the divs. Again, as KonFusion has mentioned it's difficult to help without more detail.

::Edit::

I had type this a while back and then was called away. Good that the issue is resolved.