mam problem z divami i css'em. Skonstruowałem 2 bloki lewy i prawy. Jeżeli dodam dużo treści do prawego bloku blok rozciąga się wraz z blokiem nadrzędnym, natomiast jeżeli dodam do lewego, to sam lewy blok jest rozciągnięty a prawy i nadrzędny blok pozostaje bez zmian.
Widać to na rysunku zrzut ekranu
Kod html:
Kod
<div id="main-wrapper">
<div id="menu-boczne">
<div id="frame"><div class="top-left"><div class="top-right"><div class="bottom-left"><div class="bottom-right"><div class="top"> </div>
<div class="left"><div class="right"><div class="inner" style="font-size: 100%;">
Witaj czytelniku! <br/>
3. Jestem zgrabną i atrakcyjną ramką!<br/>
4. Niewiele ważę i szybko się ładuję.<br/>
5. Mam fajny niebieski wygląd.<br/>
6. Możesz mnie do woli powielać i powiększać,<br/>
7. bo można mnie bez problemu skalować.<br/>
</div></div></div><div class="bottom"> </div></div></div></div></div></div>
</div>
<div id="content-column" class="column">
<div id="frame"><div class="top-left"><div class="top-right"><div class="bottom-left"><div class="bottom-right"><div class="top"> </div>
<div class="left"><div class="right">
<div class="inner">
<div id="breadcrumb">naglowek</div>
<h1 class="title" id="page-title">Tytuł</h1>
<div class="tabs">Zakładki</div>
pomoc
<ul class="action-links">Action linki</ul>
tresc gora
tresc srodek
tresc dol
</div> <!-- /div.inner -->
</div></div><div class="bottom"> </div></div></div></div></div></div>
</div>
</div>
<div id="footer-wrapper" class="clearfix">
stopka
<div id="footer-closure" class="clearfix">
zamkniecie stopka
</div>
</div> <!-- /#footer-wrapper -->
</div> <!-- #wrapper -->
<div id="menu-boczne">
<div id="frame"><div class="top-left"><div class="top-right"><div class="bottom-left"><div class="bottom-right"><div class="top"> </div>
<div class="left"><div class="right"><div class="inner" style="font-size: 100%;">
Witaj czytelniku! <br/>
3. Jestem zgrabną i atrakcyjną ramką!<br/>
4. Niewiele ważę i szybko się ładuję.<br/>
5. Mam fajny niebieski wygląd.<br/>
6. Możesz mnie do woli powielać i powiększać,<br/>
7. bo można mnie bez problemu skalować.<br/>
</div></div></div><div class="bottom"> </div></div></div></div></div></div>
</div>
<div id="content-column" class="column">
<div id="frame"><div class="top-left"><div class="top-right"><div class="bottom-left"><div class="bottom-right"><div class="top"> </div>
<div class="left"><div class="right">
<div class="inner">
<div id="breadcrumb">naglowek</div>
<h1 class="title" id="page-title">Tytuł</h1>
<div class="tabs">Zakładki</div>
pomoc
<ul class="action-links">Action linki</ul>
tresc gora
tresc srodek
tresc dol
</div> <!-- /div.inner -->
</div></div><div class="bottom"> </div></div></div></div></div></div>
</div>
</div>
<div id="footer-wrapper" class="clearfix">
stopka
<div id="footer-closure" class="clearfix">
zamkniecie stopka
</div>
</div> <!-- /#footer-wrapper -->
</div> <!-- #wrapper -->
a tutaj cssik
Kod
/*****************************************************************************
* Wrappers
*****************************************************************************/
body {
background: #fdfdfd url('images/body.png') 0 0 repeat;
}
body div#skipcontent {
display: none;
}
body div#wrapper {
margin: 0 auto;
width: 980px;
}
/*****************************************************************************
* Header
*****************************************************************************/
div#header-wrapper {
div#header {
height: 320px;
position: relative;
background: url('images/header.png') repeat-x;
}
div#logo-name-slogan {
display: block;
padding: 40px 0px 0px 37px;
}
div#logo-name-slogan a#logo {
float:left;
padding-right:12px;
}
div#logo-name-slogan h1#site-name,
div#logo-name-slogan div#site-name {
margin: 0px;
}
h1#site-name a,
div#logo-name-slogan div#site-name a {
font-size: 60px;
font-weight: 600;
letter-spacing: -2px;
margin: 0px 0px;
text-decoration: none;
color: #404040; /* E */
}
div#header div#logo-name-slogan div#name-slogan div#site-slogan {
margin: 0px;
color: #878787;
font-size: 24px;
}
div#header-wrapper div.region-header-menu {
}
/*****************************************************************************
* Main
*****************************************************************************/
div#main-wrapper {
background: url('images/braz.png') repeat;
padding: 0px 40px;
}
div#main-wrapper table {
width: 100%;
}
/*****************************************************************************
* Content column
*****************************************************************************/
#content-column {
vertical-align: top;
overflow: hidden;
width: 610px;
border: 1px solid black;
}
#content-column div.inner {
min-height: 400px;
}
#content-column div.region-content-top {
/* -> block.css */
}
#content-column div.region-content {
/* -> block.css */
/* -> node.css */
}
#content-column div.region-content-bottom {
width: 100%;
/* -> block.css */
}
#content-column a.feed-icon {
float: right;
}
/*****************************************************************************
* First sidebar column
*****************************************************************************/
#sidebar-first-column {
vertical-align: top;
padding: 30px 15px;
overflow: hidden;
}
/*****************************************************************************
* Second sidebar column
*****************************************************************************/
#sidebar-second-column {
vertical-align: top;
padding: 30px 15px;
overflow: hidden
}
/*****************************************************************************
* Footer
*****************************************************************************/
div#footer-wrapper {
min-height: 50px;
}
div#footer-wrapper div.region-footer {
/* --> block.css */
}
div#footer-wrapper div#footer-closure {
clear: both;
}
div#footer-wrapper div#footer-closure div.region-footer-closure {
/* --> block.css */
padding: 10px 0px;
}
#content {
background: url('images/braz.png') repeat;
width: 100%;
}
#side_panel {
float: left;
width: 300px;
margin-left:50px;
margin-top: 120px;
}
#main_column {
float: right;
width: 598px;
margin-right:10px;
margin-top: 120px;
}
.clear {
clear: both;
}
#footer {
width: 778px;
margin: 0 auto;
height: 20px;
background: url('images/footer.gif') 5px 0 no-repeat;
}
img {
border:0 none;
}
div#menu-boczne{
width: 300px;
position: absolute;
float: left;
overflow: hidden;
border: 1px solid red;
min-height: 400px;
}
* Wrappers
*****************************************************************************/
body {
background: #fdfdfd url('images/body.png') 0 0 repeat;
}
body div#skipcontent {
display: none;
}
body div#wrapper {
margin: 0 auto;
width: 980px;
}
/*****************************************************************************
* Header
*****************************************************************************/
div#header-wrapper {
div#header {
height: 320px;
position: relative;
background: url('images/header.png') repeat-x;
}
div#logo-name-slogan {
display: block;
padding: 40px 0px 0px 37px;
}
div#logo-name-slogan a#logo {
float:left;
padding-right:12px;
}
div#logo-name-slogan h1#site-name,
div#logo-name-slogan div#site-name {
margin: 0px;
}
h1#site-name a,
div#logo-name-slogan div#site-name a {
font-size: 60px;
font-weight: 600;
letter-spacing: -2px;
margin: 0px 0px;
text-decoration: none;
color: #404040; /* E */
}
div#header div#logo-name-slogan div#name-slogan div#site-slogan {
margin: 0px;
color: #878787;
font-size: 24px;
}
div#header-wrapper div.region-header-menu {
}
/*****************************************************************************
* Main
*****************************************************************************/
div#main-wrapper {
background: url('images/braz.png') repeat;
padding: 0px 40px;
}
div#main-wrapper table {
width: 100%;
}
/*****************************************************************************
* Content column
*****************************************************************************/
#content-column {
vertical-align: top;
overflow: hidden;
width: 610px;
border: 1px solid black;
}
#content-column div.inner {
min-height: 400px;
}
#content-column div.region-content-top {
/* -> block.css */
}
#content-column div.region-content {
/* -> block.css */
/* -> node.css */
}
#content-column div.region-content-bottom {
width: 100%;
/* -> block.css */
}
#content-column a.feed-icon {
float: right;
}
/*****************************************************************************
* First sidebar column
*****************************************************************************/
#sidebar-first-column {
vertical-align: top;
padding: 30px 15px;
overflow: hidden;
}
/*****************************************************************************
* Second sidebar column
*****************************************************************************/
#sidebar-second-column {
vertical-align: top;
padding: 30px 15px;
overflow: hidden
}
/*****************************************************************************
* Footer
*****************************************************************************/
div#footer-wrapper {
min-height: 50px;
}
div#footer-wrapper div.region-footer {
/* --> block.css */
}
div#footer-wrapper div#footer-closure {
clear: both;
}
div#footer-wrapper div#footer-closure div.region-footer-closure {
/* --> block.css */
padding: 10px 0px;
}
#content {
background: url('images/braz.png') repeat;
width: 100%;
}
#side_panel {
float: left;
width: 300px;
margin-left:50px;
margin-top: 120px;
}
#main_column {
float: right;
width: 598px;
margin-right:10px;
margin-top: 120px;
}
.clear {
clear: both;
}
#footer {
width: 778px;
margin: 0 auto;
height: 20px;
background: url('images/footer.gif') 5px 0 no-repeat;
}
img {
border:0 none;
}
div#menu-boczne{
width: 300px;
position: absolute;
float: left;
overflow: hidden;
border: 1px solid red;
min-height: 400px;
}
jak sobie z tym poradzić???
pozdrawiam