Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

Absolute Position and Height

Started by computermax2328, Feb 18 2013 11:54 AM

css absolute position height

Please log in to reply

5 replies to this topic

#1 computermax2328

Advanced Member

Members
251 posts

LocationUnited States
Age:22

Posted 18 February 2013 - 11:54 AM

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,

Did you try using Wombo()?

Follow me on Twitter @maxrbaldwin

Back to top

#2 crmamx

Advanced Member

Members
423 posts

LocationAlabama

Posted 18 February 2013 - 01:10 PM

It would help to post the code.

If at first you do not succeed, QUIT, because it becomes too aggravating.

Why is it I don't understand everything I know?

http://southalabamarc.com

Back to top

#3 computermax2328

Advanced Member

Members
251 posts

LocationUnited States
Age:22

Posted 18 February 2013 - 01:14 PM

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, 18 February 2013 - 01:14 PM.

Did you try using Wombo()?

Follow me on Twitter @maxrbaldwin

Back to top

#4 computermax2328

Advanced Member

Members
251 posts

LocationUnited States
Age:22

Posted 20 February 2013 - 01:07 PM

Can anyone provide a solution for my problem??

Did you try using Wombo()?

Follow me on Twitter @maxrbaldwin

Back to top

#5 haku

Advanced Member

Gurus
6,172 posts

Posted 03 March 2013 - 09:34 PM

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.

Back to top

#6 teynon

Advanced Member

Members
881 posts

Posted 04 March 2013 - 09:18 PM

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, 04 March 2013 - 09:22 PM.

Support my Kickstarter Project!
http://www.kickstart...7618755/antroid

http://www.thomaseynon.com

Vulnerabilities: http://cwe.mitre.org...x.html#Guidance - MySQL.com hacked with SQL Injection - If it happened to them, it can happen to you.