webForumDet fria alternativet

fel i div layout.

1 svar · 242 visningar · startad av voigtann1

voigtann1Medlem sedan juni 20019 519 inlägg
#1

håller på med en sida till min bror med något jag försöker bli en fena på DIV layouter §e med denna kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css" media="screen,projection">
	@import url(style.css);
</style>
</head>

<body>
<div id="border_content">
  <div id="top">
    <div id='top_left'></div>
    <div id='middle'></div>
    <div id='top_right'></div>
  </div>
  <div id="logo"></div>
  <div id="content">
    <div id="navcontainer">
      <ul id="navlist">
        <li id="active"><a href="#" id="current">Hem</a></li>
        <li><a href="#">meny2</a></li>
        <li><a href="#">meny3</a></li>
      </ul>
    </div>
 [b]     <div style='width:450px;'>
        <h2>25 okt - Rubrik</h2>
	    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent id magna sit amet pede blandit ultrices. Nunc sit amet pede id leo tincidunt bibendum. Etiam neque. Sed fermentum eleifend massa. Maecenas malesuada. Aenean sed urna. Nulla ac sem at urna ultricies consequat. Sed dapibus nunc eu tortor. Curabitur tristique, elit vel placerat auctor, lacus ipsum faucibus ante, eget consequat nisl leo a lorem. Aenean vulputate purus a nibh. </p>
        <h2>21 okt - Vi bygger hem!</h2>
        <p>Maecenas leo erat, gravida fringilla, posuere et, eleifend eget, turpis. Integer condimentum diam nec elit. Quisque ultricies. Praesent sed lorem vel neque vehicula blandit. Duis elementum nisl at lacus. Integer vulputate tempus nisi. In hac habitasse platea dictumst. Integer vitae tortor quis ipsum malesuada sollicitudin. Pellentesque quis augue. Mauris ultricies, libero non adipiscing bibendum, velit justo dapibus tellus, eu scelerisque neque nisl nec diam. Etiam viverra ullamcorper orci. Sed vehicula convallis lacus. Suspendisse pulvinar tortor ut eros. Quisque eu justo. </p>
      </div>
      <div style='background-color:#fff;float:right;'>asdsadas</div>[/b]
  </div>
  <div id="bottom">
    <div id="botleft"></div>
    <div id="botright"></div>
  </div>
</div>
</body>
</html>

vill jag att det som är i fet stil vara som en tabell med själva texten med nyheter ska vara runt 450px och asdasdas texten höger om den. Men när jag försöker göra float:right och float:left så blir det helt fel. Min css mall:

body{
	background-image: url(images/layout/bg.gif);
	background-position: top;
	background-repeat: repeat-x;
	background-color:#eeeeee;
	font-family: "MS Serif", "New York", serif;
	font-size:14px;
}
#logo{
	height:136px;
	width:640px;
	background-image: url(images/layout/logo.jpg);
	position:absolute;
	left:1px;
	top:10px;
	border-top:1px solid #000;
	float:left;
}

body #border_content{
	float:left;
	margin-left: -320px; /* (-) ½ av width*/
	width: 640px;
	left:50%;
	top:19px;
	position: absolute;
	padding:1px;
	background:#000;
}
#content p{
	margin-top:2px;
}
#content h2{
	font-size:18px;
	font-weight:normal;
	margin:0px;
	width:100%;
	border-bottom: solid 1px #ccc;
font: 125% 'Lucida Grande', 'Lucida Sans Unicode';
}

body #border_content #content{
	background: #fff;
	border: #b7b7b7 1px solid;
	padding: 145px 4px 4px 4px;
}
body #border_content #top{
	top:-19px;
	width:640px;
	position: absolute;
	background-image: url(images/layout/top.gif);
	background-position: top;
	background-repeat: repeat-x;
	height:22px;
	background-color:#fff;
}
#top #top_left{
	float:left;
	height:22px;
	width:31px;
	background-image: url(images/layout/left.gif);
}

#top #middle{
	position:absolute;
	top:3px;
	left:250px;
	float:left;
	background-image: url(images/layout/tm.gif);
	background-repeat: no-repeat;
	width:118px;
	height:17px;
}

#top #top_right{
	float:right;
	height:22px;
	width:31px;
	background-image: url(images/layout/right.gif);
}

#bottom{
	float:left;
	margin-left: -320px; /* (-) ½ av width*/
	width: 640px;
	left:50%;
	position: absolute;
	height:3px;
	background-position: top;
	background-image: url(images/layout/bottom.gif);
	background-repeat: repeat-x;
	height:3px;
	bottom:-3px;
}
* html #bottom{
		bottom:-16px;
}
#bottom #botleft{
	float:left;
	height:3px;
	width:32px;
	background-image: url(images/layout/bl.gif);
	background-repeat: no-repeat;
}
#bottom #botright{
	float:right;
	height:3px;
	width:37px;
	background-image: url(images/layout/br.gif);
	font-size:1px;
	background-repeat: no-repeat;
}

Det tycks som att dom divar jag vill ha flyter över alla andra men att
<div id="navcontainer"> inte följer riktigt med.. alla andra divar gör det. Vad är det för fel?

voigtann1Medlem sedan juni 20019 519 inlägg
#2

löste det med en clear:both; div :e

134 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
132 ms — hämta tråd, inlägg och bilagor (db)