Grow your CSS skills. Land your dream job.

Container expands in a new page

  • # December 31, 2012 at 10:21 pm

    Hello,

    I’m having a hard time with my container. In one page, it works as needed but in the second page, the container (it is on the right) expands. I have 2 stylesheets. I wonder if its something wrong with the math? I tried changing the values so they would all match up but it still wouldn’t do :/

    This is style.css

    body {
    margin: 0;
    padding: 0;
    text-align: center;
    }

    #page-wrap {
    width: 800px;
    margin: auto;
    }

    #container {
    float: right;
    width: 480px;
    border-left: 2px dashed #e8e8e8;
    margin: auto;
    padding-left: 18px;
    text-align: left;
    }

    This is the second css stylesheet:

    dd.clear {
    float: none;
    margin: 0;
    height: 15px; }

    dt {
    font-size: 1.2em;
    width: 110px;
    float: left;
    }

    dd {
    font-size: .8em;
    width: 300px;
    float: right;
    }

    The second stylesheet code was taking from [CSS-Tricks one page resume](http://css-tricks.com/examples/OnePageResume/ “”).

    # December 31, 2012 at 10:30 pm

    Create a Pen

    # December 31, 2012 at 10:47 pm

    First things first — even the simple and obvious fix things! Have you linked your CSS files correctly in the second HTML file? I advise taking “text-align:center;” away from the body element and apply it where necessary too. Create at Pen. like Chris said, at CodePen or use JSFiddle to show use how you’re setting your page up in HTML.

    # December 31, 2012 at 10:49 pm

    I’m having a hard time doing the second html/css page for codepen but here is the [original page](http://codepen.io/joe/pen/qCLAz “”). Just imagine that the lorem ipsum part expands about 10 pixels into the left. I know its slight but its really killing me.

    edit: @JamesMD, I’m pretty sure I linked the right CSS page. I mean I’m using all of the main css’ properties and just appending the dd and dt values. I just made a new css to make it cleaner. Also taking away the text-align didn’t make a difference :/ I can’t figure out what I’m doing wrong because they also show up as valid markups

    Thanks!

    # December 31, 2012 at 11:47 pm

    Hmm. Seems bizarre it would work on one but not the other. Is this exactly how you’re using the second page, or are you adding images/more text etc?

    I would personally position the left menu div elements before the container element like so. See if this changes it. Apart from that, I can’t see the problem still until you show us where the problem is (the second page). I could only imagine there is a positioning issue when adding other things rather than text.

    Try This

    Just updated it with images. Seems fine.

    # January 1, 2013 at 12:12 am

    [Here](http://codepen.io/joe/pen/dGtzK “”) is the second page with its own html and the second css has been appended and begins at line 52. I am using dd, dl, and dt for my CV so that might be the problem..

    # January 1, 2013 at 1:00 am

    @stesani – thanks for the clear up on confusion! :) I understand now. You mean the elements are indenting from the left? I don’t see the container expanding — the dd attribute puts an automatic pixel margin to the left. It’s being displayed as an Inline-block because of the flow of the dd, dt and dl.

    The error is in your CSS. on line 55, the “.pic { padding-top: 15px; ” has no closing bracket.

    It should be:


    .pic { padding-top: 15px; }

    Use this if you want no margins to begin with:


    dd, dt, dl {
    margin:0;
    }
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".