JSFiddle - React, Tailwind, and code Playground

by nndd

HTML

<body>

<div id="header">
    Logo / elementy menu poziomego
</div>
 
    <!-- ewentualne pudełko na środkowe elementy - chyba trzeba, aby wyśrodkować
<div id="container">
</div> -->

<div id="menuleft">
   <!-- <?php include "menuleft.php"; ?> -->
    <p class="ml">element menu 1</p>
    <p class="ml">element menu 2</p>
    <p class="ml">element menu 3</p>
    
</div>
    
<div id="center">
    <!-- <?php include ... ?> -->
    
    Treść Treść Treść Treść Treść Treść Treść </br>
    Tylko co zrobić by ta treść była wyżej, wyrównana do góry, tuż pod logo? Tyczy się też tego bloku z prawej :P
</div>
    
    <div id="adR">
        Banner pionowy 160*600px
</div>
    
    <div id="footer">
     <!-- <?php include "footer.php"; ?> -->
        Stopka / informacje o autorze / licznik wyświetleń
</div>

</body>

CSS

#body {

}

div {
    margin: 3px;
    padding: 3px;
}

#header {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #AFF;
    width: 80%;
    height: 30px;
}

#menuleft {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    border: 1px dotted #444;

    max-width: 100px;
    min-height: 150px;
}

.ml {
    background-color: #9AF;
}

#center {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    background-color: #CCF;
    width: 60%;
    min-height: 150px;
}

#adR {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    background-color: #AAA;
    min-width: 60px;
    min-height: 150px;
}

#footer {
    margin-left: auto;
    margin-right: auto;
    background-color: #CAF;
    width: 80%;
    height: 50px;
}