CODEWITHSUNDEEP
csshtml
Adina T.
Adina T.

Reputation: 21

Div page design looks wrong in other resolutions

I have a main div of 75% width and 100% height. First of all, the background image doesn't go all the way until the end. Secondly, inside the div, I have two divs, one to the left, one to the right. In the right one I have mostly text, and on smaller resolutions the text gets out of the div, although it has 100% height. I have tried to set pixel heights, but it looks wrong on different resolutions. Any solutions?

Also, the left div seems to have too much space above it in some resolutions, but in others the right one does. I just don't get what I've done wrong.

Here's part of the code. Also, I used a table too, in order to arrange the two lower divs. I know it's probably a mess. :D

CSS:

body {
    height: 100%;
    font-family: Tahoma,sans-serif;
    background-image: url("images/pattern.jpg");
    color: #005200;
    font-size: 15px;
    text-align: left;
}


html {
    background: #47B224;
    height: 100%;
}

.main {
    background: white;
    width: 76%;
    margin: 0;
    padding: 10px;
    border: 1px solid black;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -38%;
}

.left {
    margin: 5px;
    text-align: left;
    width=135px;
}

.right {
    padding: 5px;
    float: right;
    text-align: left;
}

table {
    margin-top: 20px;
    padding: 20px;
    padding-top: 0px;
}

and the rest is like:

<body>
<div class="main">
<table>
    <td>
        <div class="left">
        Content:left
        </div>
    </td>
    <td>
        <div class="right">
        Content:right
        </div>
    </td>
</div>
</body>

Upvotes: 1

Views: 240

Answers (1)

Jared
Jared

Reputation: 6060

jsfiddle

I made the changes that I THINK you were describing. If you are wanting your background to repeat throughout the entire screen then you have to tell it to repeat with background-repeat: repeat; I also made this apply to the html tag instead of the body tag.

This might have been by design, but to me it looked like you wanted to split the main section into columns in which case you need to use float: left; on the left column...again this is just depending on what you were wanting and shouldn't have an effect on anything.

Personally though, I'd gauge what your target audience is and figure out what the minimum resolution is. From that design to that with your added margins on left our right on higher resolutions.

Upvotes: 1

Related Questions