Div Problems

Tdata · Jul 25, 2008

I have a Quick Question. Is there any way to prevent Div Layers from overlapping when the browser window is resized?

CSS:

Code:

body.main {
		background-color:#00ffff;
}
/* Properties that both side lists have in common */
div.link-list {
        width:10.2em;
        position:absolute;
        top:0;
        font-size:80%;
        padding-left:1%;
        padding-right:1%;
        margin-left:0;
        margin-right:0;
}
/* Properties for Div Header */

#header {
		background-postion:center;
		background-color:#000;
		height:250px;
		min-width:600;
		margin-left:10.2em;
		margin-right:10.2em;
		padding-left:1em;
		padding-right:1em
}

/* we leave some place on the side using the margin-* properties */
#main {
        margin-left:10.2em;
        margin-right:10.2em;
        padding-left:1em;
        padding-right:1em;
}
/* and then we put each list on its place */
#list1 {
        left:0;
        top:10em;
        min-height:200px;
        background-color:#ff00ff;
}
#list2 {
        right:0;
        min-height:200px;
        background-color:#00ff00;
}
#linkhead {
		background-image:url('../images/v1/linkhead.png');
		font-size:1.3em;
		font-weight: bold;
		text-decoration: underline;
		text-align: center;
				
}
#linkbody {
		background-image:url('../images/v1/linkbody.png');
}

Index.html

Code:

<html>

<head>

<link rel="stylesheet" type="text/css" href="style/style.css" />

</head>

<body class="main">

<div id="header"></div><div id="main"></div> <div id="list1" class="link-list">
</div> <div id="list2" class="link-list"></div>
</body>
</html>

I can't seem to keep the right-hand column from overlapping the main column. It is the reason I use Tables instead of using Divs... Any Ideas?

___ · Jul 25, 2008

Use percentile widths and margins instead of fixed sizes; that's what tables do automatically with each column. If you want your right column to collapse under the main column, give the main column a higher z-index. If you want your right column to have a flexible width but your main column to have a fixed width, give only your right column and your main column's right margin percentile widths, and then float the right column to the right:

Code:

div#rightcolumn {
width:20%;
float:right;
}

div#maincolumn {
margin-right:21%;
}

Your right column will naturally float into the margin space. You will, however, need to have your right column precede your main column in the markup for this to work, small caveat. Technically you can fix your right column, give it a left margin the size of the main column and auto width, and float your main column left with a fixed width and it will probably work in some browsers, but don't quote me on that. It's easier to do it the former way.

Check out Positioniseverything.net's any order column layout for more help on the subject. Good luck :D

Envision, Create, Share

Div Problems

Tdata

___

Share this page

Thank you for viewing

Discord

RPG Maker

Content