1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Column getting misaligned?

Discussion in 'HTML & Website Design' started by Glitcher, Jan 11, 2014.

0
  1. #1
    Okay, so I'm trying to make a div column with 60% width and stretches the full length of the page. Since divs only stretch to how much content is in them, I had to set the div position to 'absolute' and the 'top' and 'bottom' properties to zero. Here's the code:

    <head>
<style type="text/css">

body {margin: 0; padding: 0;}

#container {
   min-width: 400px;
   background-color: red;
   position: absolute;
   left: 20%;
   right: 20%;
   top: 0;
   bottom: 0;
   padding: 20px;
}

p {margin: 0; text-align: center}

</style>
</head>

<body>

<div id="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

</body>
    Code (markup):
    Now for the most part this is fine, but when the browser window is really narrow, this happens:

    [​IMG]

    The div is no longer centered properly, which can be annoying for phones and other small screens. This only seems to happen if there's a minimum width. I can't just center the div by inserting "margin: 0 auto", because that doesn't work when the position is absolute. Is there another solution?
     
    Glitcher, Jan 11, 2014 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,714
    Likes Received:
    1,995
    Best Answers:
    252
    Trophy Points:
    515
    #2
    Sounds like what you want is called a 100% min-height layout... to do that you have to make sure the element's parent has a 'real' height declared (anything other than auto). You set html and body to height:100%, then the element gets min-height:100%; (anything between it and body needs to be height:100% too). You may even have to resort to some form of faux-columns type effect to make it LOOK like they stretch to full height.

    What you are doing with APo is inaccessible trash -- try shrinking the page shorter than your content's height to see why. You should <vince neil>Never ever Never Never ever ever ever Never ever ever ever ever Never Ever ever ever Never Never Never ever ever ever *slap*</vince neil> absolute position a content element! That's NOT how one builds a layout!

    It's also usually impractical to be dicking around with trying to code the layout before you have semantic markup of the ENTIRE page content or at least a reasonable facsimile of such. You're trying to position your larger column before you even have markup for the narrower one... or the heading... or the footer... Focusing on one element without planning on the rest at the same time is a guaranteed road to failure. In that same way fixing the width of the larger column is usually a bad idea and/or unreliable, which is why I usually set the width of my narrower column to elastic and the larger one to fluid, with a semi-fluid wrapper around both.
     
    deathshadow, Jan 12, 2014 IP
  3. Glitcher

    Glitcher Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Keep in mind that this is just a test and that obviously I will create a full page layout before coding. Also, what does APo stand for?

    Huh, I didn't even know you could add properties to 'html' in the CSS style. What's the difference between that and the body? Anyway, I tried your trick and it seems to work great for the test, but some really strange things happen when I try to use it on the actual website. Take a look:

    [​IMG]

    See that space between the 'welcomeleft' div and the 'welcomecontainer' div I circled in green? Why is that there? There's no additional margin or padding in the code, so there's no logical reason why there would be a space like that. See the code for yourself:

    #welcomecontainer {
   background-color: red;
   width: 60%;
   min-width: 700px;
   margin: 0 auto;
   min-height: 100%;
}

#welcomeleft {
   background: #2e1214; /* Old browsers */
   background: -moz-linear-gradient(left,  #2e1214 0%, #492919 5%, #492919 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, right top, color-stop(0%,#2e1214), color-stop(5%,#492919), color-stop(100%,#492919)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(left,  #2e1214 0%,#492919 5%,#492919 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(left,  #2e1214 0%,#492919 5%,#492919 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(left,  #2e1214 0%,#492919 5%,#492919 100%); /* IE10+ */
   background: linear-gradient(to right,  #2e1214 0%,#492919 5%,#492919 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e1214', endColorstr='#492919',GradientType=1 ); /* IE6-9 */

   width: 69%;
   float: left;
   margin-left: 0;
   min-height: 100%;
}
    Code (markup):
    See? It says "float: left" and "margin-left: 0" for the welcomeleft properties, so why isn't it aligned with the container? The welcomeleft div should also stretch to the bottom of the page because I wrote "min-height: 100%", but it stops short. I don't get it.
     
    Last edited: Jan 12, 2014
    Glitcher, Jan 12, 2014 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,714
    Likes Received:
    1,995
    Best Answers:
    252
    Trophy Points:
    515
    #4
    APo means Position:absolute -- APo is fine for small fixed bits like gilder-levin image replacement, but most always a train wreck on actual content/flow elements like say... an entire column of a page. APo removes the element from flow, meaning you have nothing to trigger scrollbars if the content is too tall!

    HTML is BODY's parent, so in the CSS for BODY to obey 100% height you have to set a height on BODY. As your wrapper doesn't have a height declaration it's child won't obey min-height, and I suspect that's your problem. Really it seems like you're getting too complex for your own good on this... as is often the case with min-height layouts. Faux-columns would probably serve you better, as would ditching % widths for the columns; particularly since it appears your sidebar is images, and images are a fixed width -- so even going elastic there is impractical and really on the whole what I'm seeing is treading into "things that don't belong in a layout in the first place" and/or "But I can do it in Photoshop" style nonsense.

    But without seeing the markup for the whole thing and your CSS for the whole thing, I'm guessing wildly in the dark.
     
    deathshadow, Jan 12, 2014 IP