Forum Moderators: not2easy

Message Too Old, No Replies

<div> positioning help

         

tcustom

5:32 am on Feb 28, 2010 (gmt 0)

10+ Year Member



I built a <div> only site where I added a jQuery rotating image section to the left side div, and trying to get some text (news) underneath in another div. I can by styling the news with a position of absolute, and a top: of 225px, but I think using the absolute parameter does not let the container div expand the whole content section down to house the news. See here: <snip> (the news is viewable in FF and IE8, but no where to be seen in IE7 or 6 - so this is a second problem).

Any help would be appreciated. I added my cms template <body> code and the css below. The bracketed {} items are smarty code. Using CMS Made Simple which uses smarty. The css is only for the slides (rotating images) and the news section. Thanks in advance...

<body>
<br /><br /><br />
<div id="pagewrapper">
<div class="main">
<div id="header">
<div class="top">
<div class="title">
{search}
<h1>{cms_selflink dir="start"}</h1>
<h2>Elevator Engineering, Design, Modernization and Consulting</h2>
</div>
</div>
{menu template='accessible_cssmenu.tpl'}
</div>
<div class="content">
<div id="slideshow" class="slides">
<img src="uploads/images/building_1.jpg" />
<img src="uploads/images/building_2.jpg" />
<img src="uploads/images/building_3.jpg" />
<img src="uploads/images/building_4.jpg" />
<img src="uploads/images/building_5.jpg" />
<img src="uploads/images/building_6.jpg" />
</div>
<div class="news"><h4>COMPANY NEWS</h4>{news}</div>
<div class="bread">{breadcrumbs}</div>
<div class="right">{content}</div>
<div class="fix">
<img src="images/sp.gif" width="1" height="1" alt="" />
</div>
</div>
<div id="footer">
<div class="footer">{global_content name='VSA_footer'}</div>
</div>
</div>
<br /><br /><br />
</div>
</body>


.slides {
float: left;
width: 150px;
padding: 10px 2px 0px 5px;
margin: 5px 0px 0px 5px;
}
.slides img {
width: 150px;
height: 220px;
}
.news {
position: absolute;
float: left;
top: 225px;
width: 150px;
text-align: justify;
margin: 5px 0px 0px 5px;
}

[edited by: limbo at 11:01 am (utc) on Feb 28, 2010]
[edit reason] No URL's please, see TOS [webmasterworld.com] [/edit]

tcustom

2:56 am on Mar 1, 2010 (gmt 0)

10+ Year Member



Well, it looks like the div now expands. I added a clearfix div after the rotating images and before the news div, yet the news div is underneath the rotating images. Of course I want it below...and using the position: absolute with a top: setting would defeat the purpose. Any way to get the news to flow below the images and have the news expand the container when the right side content is minimal?