Forum Moderators: not2easy
I am trying out a site layout that is built on divs and css as opposed to my typical table design layouts.
In doing so my layout overall has been successful - visually at least.
My one issue is holding content within the container. Or to another step, getting the container to expand with the content. At this time, text (which is all I have tested) spills out of my page layout horizontally when not styled or wrapped in <p> tags. It would seem that vertically it sizes with whatever is inputted but anything raw going across will eventually spill out. I ultimately don't mind the layout having to compensate added width, I actually want it to be able to expand. Some content is going to be dynamic and even though it is generally styled, the possibility of images being too big could happen.
To give you an idea css layout, I have a wrapper, container and also a body for main content of the page amongst others that make up the header and navigation to the layout which I will link as well since I don't know if they might be culprit to some error. I apologize if some of it is irrelevant to this.
CSS is as follows. . .
#wrapper
{ text-align: center;
margin-right: auto;
margin-left: auto; }#container
{ text-align: center;
background-color: #fff;
margin-right: auto;
margin-left: auto;
width: 800px;
border: solid 1px #000 }
#pageHdr
{ background-color: #000;
background-image: url(images/ls_hdr.jpg);
background-position: 800px 102px;
width: 800px;
text-align: center;
margin-right: auto;
margin-left: auto;
width: 800px;
height: 102px }
#navHdr
{ color: #fff;
background-color: #252759;
text-align: center;
margin-right: auto;
margin-left: auto;
padding-top: 5px;
padding-bottom: 5px;
height: 20px }
#navSubHdr
{ background-color: #e6e6e6;
text-align: center;
margin-right: auto;
margin-left: auto;
height: 20px }
#pageBody
{ text-align: left;
width: 750px;
margin: 20px }
#pageFtr
{ color: #000;
font-size: 10px;
margin: 10px }
Thanks.
Based on my CSS I changed some of my set widths to Auto and then just set a minimum width and some margin on the Body so that when the page expands, the content expands nicely with it so long as it is in a tag.
I guess my original question was what if it wasn't in a tag.
Like -
<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> Instead of -
<div><p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p></div> Based on my styling that I posted, this would break out of the layout. Now it cannot do that unless the browser window is collapsed to a certain width. Which being that I set my page's minimum width to 800px for now, this means that if that text is over 800px, it punches out of the layout again.
So is there a fix for that? Not that I have random text running around with no tags around it. But I do wonder.
Thanks