Jump to content

Absolute Position and Height

computermax2328

By computermax2328
in CSS Help

 Share

Recommended Posts

computermax2328 Regular Member

computermax2328

Posted
Posted

Hey All,

 

I have two divs, one floats right and the other left, right next to each other. The one of the left has a z-index, is set to absolute positioning, and has a drop shadow on its right edge so it looks like it is over the other column. The problem is that when the left div goes longer than the right it falls out of the wrapper and past the footer.

 

I have a br tag styled with clear both to give the wrapper its height after the two floating divs.

 

Any help with this height problem??

 

Thanks in advance,

Link to comment
Share on other sites
computermax2328 Regular Member

computermax2328

Posted
  • Author
Posted (edited)

Sorry, I thought it would be easy to understand. Code is below. As you can see this is for a joomla template. If you don't have any Joomla experience don't worry about that code, just the divs it lives in.

 

HTML

<section id="wrapper">
<section id="left">
<div id="sobox" class="width">
<jdoc:include type="modules" name="FeaturedContent" />
</div>
<div id="sobox" class="width">
<jdoc:include type="modules" name="SectionSlide" />
</div>
<jdoc:include type="component" />
</section>
<section id="right">
<div id="box" class="width">
<div id="rib">
<h3>Follow Quad News</h3>
</div>
<div id="boxcon">
<div id="sobox" class="width">
<jdoc:include type="modules" name="socialbanner" />
</div>
</div>
</div>
<div id="box" class="mod">
<div id="boxcon">
<jdoc:include type="modules" name="banner1" />
</div>
</div>
<div id="box" class="mod">
<div id="boxcon">
<jdoc:include type="modules" name="banner2" />
</div>
</div>
<div id="box" class="mod">
<div id="boxcon">
<jdoc:include type="modules" name="banner3" />
</div>
</div>
<div id="box" class="mod">
<div id="boxcon">
<jdoc:include type="modules" name="banner4" />
</div>
</div>
<div id="box" class="mod">
<div id="boxcon">
<jdoc:include type="modules" name="banner5" />
</div>
</div>
<div id="box" class="mod">
<div id="boxcon">
<jdoc:include type="modules" name="banner6" />
</div>
</div>
<div id="box" class="mod">
<div id="boxcon">
<jdoc:include type="modules" name="banner7" />
</div>
</div>
</section>
<br style="clear: both;"/>
</section>

 

CSS

#wrapper {
background-color: #f0f0f0;
padding: 30px 20px;
}
/* Article Page right column*/
#right {
width: 36%;
float: right;
background-color: #dbdbdb;
margin-top: 20px;
}
/* Article Page left column*/
#left {
width: 60%;
float: left;
background-color: #ffffff;
-moz-box-shadow: 5px 0px 5px #888888;
-webkit-box-shadow: 5px 0px 5px #888888;
box-shadow: 5px 0px 5px #888888;
padding: 20px;
}

 

Thanks in advance

Edited by computermax2328
Link to comment
Share on other sites
  • 2 weeks later...
haku Regular Member

haku

Posted
Posted

Considering that you mentioned your div was absolutely positioned, and the code you showed us had no absolute positioning, it's hard when you ask us a question about one thing, and show us code for something else.

Link to comment
Share on other sites
teynon Member

teynon

Posted
Posted (edited)

As haku has stated, your code is not representing what you asked. But this might do what you are trying to do (http://jsfiddle.net/LW47W/):

<html>
    <head>
        <style>            
            #wrapper {
                background-color: #f0f0f0;
                position: relative;
                padding: 20px;
            }
            /* Article Page right column*/
            #right {
                width: 36%;
                float: left;
                background-color: #dbdbdb;
                margin-top: 20px;
                margin-left: 0px;
                z-index: 1;
                position: relative;
            }
            /* Article Page left column*/
            #left {
                width: 60%;
                float: left;
                background-color: #ffffff;
                -moz-box-shadow: 5px 0px 5px #888888;
                -webkit-box-shadow: 5px 0px 5px #888888;
                box-shadow: 5px 0px 5px #888888;
                z-index: 2;
                position: relative;
            }
            .width {
                padding: 20px;
            }
        </style>
    </head>
    <body>
        <section id="wrapper">
            <section id="left">
                <div id="sobox" class="width">
                    <jdoc:include type="modules" name="FeaturedContent" />
                    I'm a banana!<br />I'm a banana!<br />I'm a banana!<br />I'm a banana!<br />
                    I'm a banana!<br />I'm a banana!<br />I'm a banana!<br />I'm a banana!<br />
                    I'm a banana!<br />I'm a banana!<br />I'm a banana!<br />I'm a banana!<br />nkeys and bananas and I'm a banana! and I'm a banana! and I'm a banana! and 
                </div>
                <div id="sobox" class="width">
                    <jdoc:include type="modules" name="SectionSlide" />
                </div>
                <jdoc:include type="component" />

                <br style="clear: both;"/>
            </section>
            <section id="right">
                <div id="box" class="width">
                    <div id="rib">
                        <h3>Follow Quad News</h3>
                    </div>
                    <div id="boxcon">
                        <div id="sobox" class="width">
                            I'm a banana!<br />I'm a banana!<br />I'm a banana!<br />I'm a banana!<br />
                            I'm a banana!<br />I'm a banana!<br />I'm a banana!<br />I'm a banana!<br />
                            <jdoc:include type="modules" name="socialbanner" />
                        </div>
                    </div>
                </div>
                <div id="box" class="mod">
                    <div id="boxcon">
                        <jdoc:include type="modules" name="banner1" />
                    </div>
                </div>
                <div id="box" class="mod">
                    <div id="boxcon">
                        <jdoc:include type="modules" name="banner2" />
                    </div>
                </div>
                <div id="box" class="mod">
                    <div id="boxcon">
                        <jdoc:include type="modules" name="banner3" />
                    </div>
                </div>
                <div id="box" class="mod">
                    <div id="boxcon">
                        <jdoc:include type="modules" name="banner4" />
                    </div>
                </div>
                <div id="box" class="mod">
                    <div id="boxcon">
                        <jdoc:include type="modules" name="banner5" />
                    </div>
                </div>
                <div id="box" class="mod">
                    <div id="boxcon">
                        <jdoc:include type="modules" name="banner6" />
                    </div>
                </div>
                <div id="box" class="mod">
                    <div id="boxcon">
                        <jdoc:include type="modules" name="banner7" />
                    </div>
                </div>
            </section>
            <br style="clear: both;"/>
        </section>

        <br style="clear: both;"/>
    </body>
</html>
Edited by teynon
Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.