Po pierwsze chcę aby divy 'column_left' oraz 'column_right' były umiejscowione w jednej lini. Dodaję więc do nich parametr 'display: inline' który sprawia że podane columny są w lini. Niestety takie rozwiązanie przestaje działać jeżeli do któregoś z Divów wstawie obrazek. Divy niezachowują dotego przydzielonej szerokości +_+. Co mam zrobić aby divy były w jednej lini ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="robots" content="all" /> <link rel="stylesheet" href="style.css" type="text/css" /> <div id="column_left">left
zxczxczxczxczxc vbn
</div> <div id="column_right">righ
right right right right
</div>
body {
font-famil: Tahoma, Trebuchet Ms, Verdana, sans-serif;
font-size: 10pt;
color: #324E05;
background: #AEBD9C url('gfx/background.png') repeat;
padding: 0px;
margin: 0px;
}
div, img {
padding: 0px;
margin: 0px;
}
div#body {
position: relative;
vertical-align: top;
margin-right: auto;
margin-left: auto;
width: 764px;
height: 100%;
}
div#shadow_left {
position: absolute;
left: 0px;
width: 6px;
height: 100%;
background-color: #000000;
}
div#shadow_right {
position: absolute;
right: 0px;
width: 6px;
height: 100%;
background-color: #000000;
}
div#site {
position: relative;
left: 6px;
background-color: #C7D6AF;
width: 750px;
height: 100%;
min-height: 100%;
border-left: 1px solid #67853D;
border-right: 1px solid #67853D;
}
div#column_left {
width: 201px;
position: relative;
left: 0px;
display: inline;
background-color: red;
}
div#column_right {
width: 201px;
position: relative;
top: 0px;
left: 549px;
background-color: red;
}
Ps. może później zamieszcze przykład w necie.