Zrobiłem takie oto pudło. I nie wiem jak zrobić to tak żeby nawet jak podpisze pudło jakąś nazwą to nie chce mi wskoczyć te drugie przez nazwe pierwszego i obniża mi margines w dół tak jak kończy się ten pierwszy podpis.
Oto mój kod:
body
{
margin: 0 auto;
padding: 0;
background: black;
}
#pojemnik{margin: 0 auto ;
text-align: center;
padding: 0px ;
width: 900px;
height: 700px;
border: 1px solid red;
background: black;
}
#pudlo
{
margin: 22px 22px;
padding: 0;
width: 850px;
height: 650px;
background: white;
}
#box1{
margin:0;
padding: 0;
text-align: center;
width: 50%;
height: 100%;
float:left;
background: red;
}
#box2{
margin:0;
padding: 0;
width: 100%;
height: 50%;
float:left ;
background: white;
}
</style>
</head>
<body>
<div id="pojemnik">
<div id="pudlo">
<div id="box1">box1
<div id="box2">box2
</div>
</body>
</html>
1. divów nikt nie nauczył zamykać?
2. Jeśli dobrze zrozumiałem, to niezależnie od rekstu w divie "box1" div "box2" ma się zaczynać tam, gdzie "box1", tak?
3. Jeśli tak, to kod poniżej. Zmieniając z-index w "box2" na 1 można zmienić kolejność wyświetlania divów. Możesz też wyrzucić kolor div'a "box2", aby było widać ten pod spodem.
<html><head>
<style>
body
{
margin: 0 auto;
padding: 0;
background: black;
}
#pojemnik{margin: 0 auto ;
text-align: center;
padding: 0px ;
width: 900px;
height: 700px;
border: 1px solid red;
background: black;
}
#pudlo
{
margin: 22px 22px;
padding: 0;
width: 850px;
height: 650px;
background: white;
}
#box1{
margin:0;
padding: 0;
text-align: center;
width: 50%;
height: 100%;
float:left;
background: red;
position: relative;
}
#box2{
margin:0;
padding: 0;
width: 100%;
height: 50%;
float:left ;
background: white;
position: absolute;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>
<div id="pojemnik">
<div id="pudlo">
<div id="box1">box1
<div id="box2">box2
</div>
</div>
</div>
</div>
</body>
</html>