Editing (v7+)

Can't get area to extend when adding a block

Permalink July 10, 2013 at 4:05 PM

I'm adding a content block to my site and the area that the block sits in will not expand with the size of the block. See the pictured that I've attached. The red arrow points to the white arrow that should extend with the block. Above & below the red are is a very feint beige color but as you'll see in the second image the block does not sit in that beige, it sits in the white.

This is a downloaded theme so here is some of the page source code.

<div id="wrapper-inner3">
         <div id="inner-page-wrap">
         <div id="innerpage">
         <div class="thinline"></div>
         <div class="thinline"></div>
         <div class="thinline"></div>
         <?php include("elements/headergeneral.php"); ?>
         <div class="line"></div>
         <div class="inner-page-content">
       <div id="container">
         <?php  
        $a = new Area('Gallery');
        $a->display($c);
        ?>      
         </div> <!-- #container -->

Viewing 15 lines of 20 lines. View entire code block.

 
 
         <div id="wrapper-inner3">
         <div id="inner-page-wrap">
         <div id="innerpage">
         <div class="thinline"></div>
         <div class="thinline"></div>
         <div class="thinline"></div>
 
 
         <?php include("elements/headergeneral.php"); ?>
         <div class="line"></div>
 
         <div class="inner-page-content">
       <div id="container">
         <?php  
        $a = new Area('Gallery');
        $a->display($c);
        ?>      
         </div> <!-- #container -->
 
        <div class="thinline"></div>
         <div class="thinline"></div>
         <div class="thinline"></div>
 
 
      <div id="share">
       <small> Share on: --></small>

Here is the CSS associated with this page

#wrapper-inner3{
   float:left;
   width:100%;   
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    -khtml-background-size: cover;
    background-size: cover;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%
}
#inner-page-wrap{
   float:left;
   width:64%;

Viewing 15 lines of 34 lines. View entire code block.

 
#wrapper-inner3{
   float:left;
   width:100%;   
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    -khtml-background-size: cover;
    background-size: cover;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%
}
 
#inner-page-wrap{
   float:left;
   width:64%;
   margin:10% 18%;
}
 
#innerpage{
   float:left;
   width:100%;
}
 
.inner-page-content{
   float:left;
   width:100%;
   background:#f0f0f0;
   clear:both;
   border-top:1px solid #fff;
}
 
#container {
  padding:1%;
  clear: both;
  background: #fafafa;
  margin:20px 0;
}

How do I get the area to expand accordingly. Thanks for the help.

2 Attachments

ConcreteOwl replied on Jul 10, 2013 at 5:31 pm Permalink Reply

Try replacing this from your css

.inner-page-content{
   float:left;
   width:100%;
   background:#f0f0f0;
   clear:both;
   border-top:1px solid #fff;
}

With this

.inner-page-content{
   float:left;
   width:100%;
   background:#fff;
   clear:both;
   /*border-top:1px solid #fff;*/
}

bkeschhh replied on Jul 10, 2013 at 5:40 pm Permalink Reply

It didn't work :\ the area is still the same.

ConcreteOwl replied on Jul 11, 2013 at 1:04 am Permalink Reply

A url would be handy..

bkeschhh replied on Jul 12, 2013 at 12:53 am Permalink Reply

http://briankeschinger.com/index.php/about-me/ sorry! I'm completely stumped on this one and I think it's one of those things where I've been staring at it too long haha. And it should be a simple fix!

ConcreteOwl replied on Jul 12, 2013 at 2:36 am Permalink Reply

In your template you have an inline style set to height: 0px

<div id="container" class="masonry" style="position: relative; height: 0px;">

Try changing it to height:100%

bkeschhh replied on Jul 12, 2013 at 11:50 am Permalink Reply

I see that code too when I inspect my page with Firebug, but if you check out the code I posted above - it doesn't exist. I can't find it in my page template or the CSS file. I've also added "height:100%;" to both the #container and .inner-page-content and neither worked. I still can't get it to stretch to the content.

ConcreteOwl replied on Jul 12, 2013 at 12:39 pm Permalink Best Answer Reply

Try removing the id="container" and make it a simple <div>

bkeschhh replied on Jul 12, 2013 at 2:50 pm Permalink Reply

Thank you so much for your time and patience. It works!

I created this id

#newsimple{
  background: #fafafa;
  height: 100%;
  margin: 2% 2% 2% 2%; 
}

and replace it in the div and it's working nicely! Thanks again. I really appreciate it!

Forums

Editing (v7+)

Can't get area to extend when adding a block

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?