/    Sign up×
Community /Pin to ProfileBookmark

Auto-adjusting height of container div

So, I’ve been looking at css for about 3 weeks now and one of the main problems that I am having is that I need to be able create a container/wrapper div to go around my content. The div that I have for the content, the height will automatically adjust depending on how much content I put into it. The container/wrapper div will not do that, but I need it because it cascades a background image for the rest of the page below my header. The code is below. Thanks for the help in advance!:rolleyes:

<div class=”wrapper”>
<div class=”ads”>
<p>Ads Are Blue.</p>
</div>
<div class=”content”>
</div>
</div>

body{
margin: 175px auto 10px auto;
width: 960px;
padding: 0px;
min-height: 500px;
height: 100%;
}
.content{

display: inline-block;
width: 612px;
padding: 15px;
min-height: 500px;
height: 100%;
}
.ads{
display: inline-block;
position: static;
width: 138px;
padding: 15px;
float: right;
clear: right;
min-height: 500px;
height: 100%;
border-radius: 0px 20px 10px 0px;
}
.wrapper{
width: inherit;
display: block;
padding: 0px;
margin-bottom: 0px;
min-height: 500px;
height: 100%;
}

to post a comment
CSS

7 Comments(s)

Copy linkTweet thisAlerts:
@VaxoNov 28.2014 — just to help that sort of stuff look into em instead of px
Copy linkTweet thisAlerts:
@jedaisoulNov 29.2014 — Just some ideas:

  • 1. Try removing "display:inline-block;" in .ads and .content, and adding "float:left" to .content.


  • 2. Why is body set to 960px width, when the combined width of .ads and .content is 750px plus 60px padding (total 810px)?


  • 3. Why are you using fixed width anyway???


  • 4. Why does body have a top margin of 185px???


  • 5. Why is .ads "position:static" (the default)???
  • Copy linkTweet thisAlerts:
    @C1ickyKeysauthorNov 30.2014 — You know you're tone comes off as very high-and-mighty????

    I understand you have questions, but this is my very first webpage since I learned the wrong way utilizing tables in my freshman year in high school. I don't think I'm doing too terribly considering this is my first attempt with CSS, but perhaps there is a such thing as a stupid question and I should just avoid posting to forums unless I know I'm totally correct???

    Of course, that kinda negates the purpose of a forum and your position as super-moderator, right???

    Or perhaps you could answer questions and try to be a little more neutral, if not helpful???

    But this is coming from someone who is not a super-moderator so you could just ignore me and go about your life as you have been.

    Ja-ne! ^^

    P.S. In case you didn't get it, all the question marks are unnecessary punctuation marks make you seem extraordinarily sarcastic
    Copy linkTweet thisAlerts:
    @C1ickyKeysauthorNov 30.2014 — Ems. I'll make sure I most definitely take a look into that. Thanks a million.
    Copy linkTweet thisAlerts:
    @jedaisoulNov 30.2014 — Sorry if I came over as high-and mighty. I genuinely did not understand the logic behind your code, hence the questions. I use three question marks (a cross between a question mark and an ellipsis) to express a lack of understanding on my part, whereas a single question mark is more neutral. It was not meant to be sarcastic.

    However, my first comment was to suggest a solution, which I hope you will try. Please let me know if it helps (or not)...

    By the way, the comment about EMs is irrelevant (in my opinion). Yes, there are good reasons to use EMs instead of PXs, but this is not one of them...
    Copy linkTweet thisAlerts:
    @C1ickyKeysauthorDec 02.2014 — Sorry, but it didn't work. After that I just ended up redesigning the layout utilizing flexboxes, a thought inspired by Vaxo. How did I get there, right? I've been reading a bit of everything, so the vocabulary got me. EMs are more related to responsive design layouts when you're talking typography/layout on a smart phone or tablet, right? I think I'll stick with this route for the sake of the experience, if only to settle on an approach and not be so flaky, but thank you, jedaisoul.
    Copy linkTweet thisAlerts:
    @jedaisoulDec 02.2014 — EMs are not specific to responsive designs. Using EMs is important for user-scalability of the web page, for conventional and responsive layouts. It's an Accessibility feature. Or rather, the flaky scalability of PXs and PNs is anti-accessible.

    Anyway, I'm glad to hear you've solved your problem.
    ×

    Success!

    Help @C1ickyKeys spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 5.19,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...