Вот начал верстать, решил пока верх не трогать и заняться отображением новостей, но возникли проблемы 1)не могу сделать так что бы второй столбец с новостями был правее( почему то вниз лезет ) 2)высота левого столбца равна отступу от нужного полодения правого html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Название сайта</title> <meta http-equiv="content-type" content="text/html; charset=windows-1251"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="wrapper"> <div id="header"> <div class="header_left"></div> </div> <div id="content"> <div class="left_colum"> <div class="title"></div> </div> <div class="right_colum"> <div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Service</a></li> <li><a href="#">Support</a></li> <li><a href="#">Careers</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div class="news"> <div class="left"> <div class="firts_news"> <span><b>Veroeros</b> sed dolor</span> <hr> <p><img src="images/pic1.png" alt="" /><strong>Fusce nec eros augue</strong> hendrerit erat. Nam dapibus lorem ipsum <a href="#">dolor et suscipit</a> semper. Lorem amet sed conseuat </p> </div> <p>Fusce nec eros augue hendrerit erat. Nam dapibus lorem ipsum <a href="#">dolor et suscipit</a> semper. Lorem amet sed conseuat.Fusce nec eros augue hendrerit erat. Nam dapibus lorem ipsum <a href="#">dolor et suscipit</a> semper. Lorem amet sed conseuat</p> <div class="right"> </div> </div> </div> </div> <div id="footer"></div> </div> </body> </html> css: /* !!! Сброс стилей !!! */ html{color:#000;background:#FFF;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input ,textarea,p,blockquote,th,td{margin:0;padding:0;} table{border-collapse:collapse;border-spacing:0;} fieldset,img{border:0;} li{list-style:none;} caption,th{text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} q:before,q:after{content:'';} abbr,acronym {border:0;font-variant:normal;} sup {vertical-align:text-top;} sub {vertical-align:text-bottom;} input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;} legend{color:#000;} ol li{list-style:decimal} /* !!! Сброс стилей Конец !!! */ html, body { background:#d4e3ee url(images/bg.png) repeat-x; color:#4f7276; font-family:Verdana,Tahoma,Arial; font-size:11px; width:100%; min-width:900px; } a { color:#cc0000; } a:hover { text-decoration:none; } p { margin-top:30px; } hr { height:1px; background:#CCCCCC; border:0px; } img { padding:3px; border:1px solid #c6e1e8; margin-right:26px; margin-bottom:26px; float:left; } div#wrapper { margin:0 auto; /* централизуем основной блок */ width:1000px; /* ширина основного блока */ height:auto; } /* Стили header (верхней части сайта) */ div#header { background:url(images/right_head.png) no-repeat top right; width:100%; height:200px; } div.header_left { background:url(images/left_head.png) no-repeat top; width:300px; height:410px; } /* Стили content (средней части сайта) */ div.left_colum { width:300px; height:auto; background:#dee8f9; margin-top:210px; } div.title { background:#3399cc url(images/title_bg.png) repeat-x; height:46px; text-align:center; color:#FFFFFF; font-size:14px; font-weight:bold; } div.right_colum { width:700px; height:auto; background:#FFFFFF; float:right; margin-top:-230px; overflow:hidden; } /* Стили news */ div.news { padding:30px; } div.first_news { text-align:right; } .first_news img { float:left; } div.left { border-right:1px solid #CCCCCC; margin-top:20px; padding-right:30px; width:290px; float:left; } .left b { font-weight:100; font-size:26px; color:#a01111; } .left span { font-size:26px; width:100%; height:26px; color:#205098; } div.right { width:290px; float:right; margin-top:20px; padding-left:30px; } /* Стили menu */ div.menu { background:#3399cc url(images/menu_bg.png) repeat-x; height:76px; width:700px; } div.menu li { float:left; margin-left:40px; margin-top:30px; list-style-image:url(image/menu_r.png); } div.menu a { font-size:14px; color:#FFFFFF; } /* Стили footer (нижней части сайта) */ div#footer { width:100%; height:300px; }
