Jump to content


Photo

Absolute Position and Height

css absolute position height

  • Please log in to reply
5 replies to this topic

#1 computermax2328

computermax2328

    Advanced Member

  • Members
  • PipPipPip
  • 285 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,

Follow me on Twitter @maxrbaldwin


#2 crmamx

crmamx

    Advanced Member

  • Members
  • PipPipPip
  • 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

#3 computermax2328

computermax2328

    Advanced Member

  • Members
  • PipPipPip
  • 285 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.

Follow me on Twitter @maxrbaldwin


#4 computermax2328

computermax2328

    Advanced Member

  • Members
  • PipPipPip
  • 285 posts
  • LocationUnited States
  • Age:22

Posted 20 February 2013 - 01:07 PM

Can anyone provide a solution for my problem??

Follow me on Twitter @maxrbaldwin


#5 haku

haku

    Advanced Member

  • Staff Alumni
  • 6,177 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.

#6 teynon

teynon

    Advanced Member

  • Members
  • PipPipPip
  • 895 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.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com