I'm trying to get a div with a paragraph of text to automatically resize when the browser window is resized.
I saw this happening automatically when I had no styles applied to the <div>, but because I have my content centered via an inner <div> inside a fixed-width container <div>, the inner div now stays fixed as well despite not having any set width.
Here's the page I'm trying to adjust (the box with the text is the inner <div> in question):
http://beta.deltsig.com/about.html
Here is a test page as well showing what I want the text to do when the window is resized:
http://beta.deltsig.com/test.html
And here is the CSS of the inner and container divs:
#div-container {
width: 768px ;
text-align:center;
margin-left: auto ;
margin-right: auto ;
}
.div-redtint-flexsize {
padding:1px 20px 20px 20px;
text-align:left;
background-color:#f3e4e4;
-moz-box-shadow: 0 0 7px rgba(0, 0, 0, .7);
-webkit-box-shadow: 0 0 7px rgba(0, 0, 0, .7);
box-shadow: 0 0 7px rgba(0, 0, 0, .7);
}
I tried adding various width styles to the CSS but nothing had any effect.
Is it a style I need to change in the div-container?
You can't have it both ways. Either your page is Liquid (% based) or Fixed (px or em based).
A fixed-width parent container makes everything inside it fixed.
If you want to try working with Liquid Layouts, go to File > New > Blank page > HTML > Layouts and select one of the Liquid Layouts from the 3rd panel. Hit Create.
Nancy O.