|
CSS - Shrinking A Div
i need to shrink a div to the width of the text inside of it, i have no clue how to do this, i know i can display:inline, but then the form that it in the div gets left out, and i know i can float: it, but i want it to be centered. how can i do this
Similar TutorialsI'm testing this page in FF 3.6, so at the moment, I don't really care what doesn't work in IE. As you can see in the code below, my page consists of a couple wrapper divs around a menu and info area. I did solid color backgrounds in the code below rather than the images I've been using to make this simpler to look at. Essentially, the outer wrappers allow part of the background image of the inner wrapper to disappear when the window is too small. In addition to that functionality, I also want the info area to shrink when the window gets even smaller than that. As it is currently, that almost works--the two wrappers shrink when I get below their max-width, but the info area does not shrink until the window is well within its max-width. Here's the code: Code: <html>
<head>
<style type="text/css">
body{
text-align: center;
}
#container {
background-color: red;
max-width:990px;
min-width:760px;
position: relative;
margin: 0 auto;
}
#content{
background-color: lightblue;
max-width:990px;
min-width:760px;
margin: 0 auto;
margin-left: -200px;
padding-left: 200px; /**allows 200px of background to disappear when window too small**/
text-align: left;
}
#menu{
background-color: #ffffcc;
width: 200px;
position: absolute;
left: -20px; /**allows hangover into disappearing background--no padding necessary since will be using img links**/
}
#info{
border: #000 1px solid;
max-width: 790px;
min-width:560px;
/**doesn't shrink when window below the max, even though container and content do**/
position: relative;
left: 180px; /**width of menu plus menu left **/
padding: 5px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div id="menu">
<img height="50" width="200" alt="link" /><br />
<img height="50" width="200" alt="link" /><br />
</div>
<div id="info">
<img height="500" width="400" alt="picture" />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</body>
</html>
Edit: I've found that if I make the menu relative positioned and position info absolute (and add top: 0px;) that I can get info to shrink properly. However, then the background from content is only as tall as the menu--which may or may not be shorter than the content in info. If I make the height of content 100% it looks ok, but not the way I'd like it to look. I can live with the extra background under the words in the case where there isn't enough to fill the whole height of the window, but if the window isn't tall enough for all the stuff in info, the background doesn't extend down far enough. Thanks for any ideas! Hi, I've been trying to integrate my blog into my website to look exactly the same. I am using the same style sheet for my blog as for the rest of my website. Somehow, my logo and fonts and pictures are all smaller on the blog than on the real site. I did a 'view source' and then pasted that into a file called test.php and testing different changes to my css from that file so it doesn't affect the rest of my site. The code is very similar between my regular site pages and my blog pages because I copied much of the header stuff directly into my blog template. I am totally perplexed as to the incredible shrinking page element dilemma. I'm not sure how much code to paste in here to get the best help. What do I need to provide you to help me troubleshoot? Any ideas? pe123 I am trying to teach myself doing a tableless website using css and I am starting with header then working my way down I spent all day trying to serach a way to stop the right end image cap to jump down the next row when firefox width browser is shrinked down but it doesn't do that in IE .. Here the url http://www.prismaze.com/ it showing only the header right now and it what I am having issue with .. there are 3 images in it .. left and right and the background .. Here the html and css <body> <div id="logoheader"> <img src="templates/stlaware/images/stlaware_01.png" width="548" height="90" border="0" align="left" /> <img src="templates/stlaware/images/stlaware_05.png" width="55" height="90" border="0" align="right" /> </div> </body> </html> ------------------------ the css ------------------------ body { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background-color : #FFFFFF ; } #logoheader { background: url(../images/stlaware_03.png) repeat; height: 90px; width: 100%; } How do you stop image on the right side of the header (stlaware_05.png) from wrapping to the next row if Firefox browser is sized down in width? Thanks .. Bill |
|||||||