Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Container expands in a new page

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #41697
    stesani
    Participant

    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](https://css-tricks.com/examples/OnePageResume/ “”).

    #119522
    chrisburton
    Participant

    Create a Pen

    #119523
    James
    Participant

    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.

    #119524
    stesani
    Participant

    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!

    #119527
    James
    Participant

    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.

    #119528
    stesani
    Participant

    [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..

    #119529
    James
    Participant

    @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)
  • The forum ‘CSS’ is closed to new topics and replies.