Pozicování v CSS

Počátky

Omezující! Web není knížka, chce horizontální členění!

Obtékání příklad

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="utf-8" />
    <title>Titulek</title>
 
    <style>
 
        div#sloupek {
            background-color: green;
            width: 30%;
            height: 1200px;
            float: left;
        }
        #sloupek a{
            color: white;
        }
 
        p {
            font-size: 130%; 
            font-family: monospace;
        }
    </style>
 
    <script>
 
 
    </script>
</head>
 
<body>
    <div id="sloupek">
        <p>Test</p>
        <ul>
            <li><a href="#abc">Nejaky seznam</a></li>
        </ul>
    </div>
    <div>
       <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis condimentum augue id magna semper rutrum. Cras elementum. Integer pellentesque quam vel velit. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Cras elementum. Nullam eget nisl. Fusce nibh. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Mauris metus. Proin mattis lacinia justo. Fusce wisi. Integer imperdiet lectus quis justo. Donec vitae arcu. Nulla pulvinar eleifend sem. Phasellus et lorem id felis nonummy placerat. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
       <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Ut tempus purus at lorem. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Phasellus faucibus molestie nisl. Nunc dapibus tortor vel mi dapibus sollicitudin. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Proin mattis lacinia justo. In enim a arcu imperdiet malesuada. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. </p> 
       <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Ut tempus purus at lorem. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Phasellus faucibus molestie nisl. Nunc dapibus tortor vel mi dapibus sollicitudin. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Proin mattis lacinia justo. In enim a arcu imperdiet malesuada. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. </p> 
       <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Ut tempus purus at lorem. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Phasellus faucibus molestie nisl. Nunc dapibus tortor vel mi dapibus sollicitudin. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Proin mattis lacinia justo. In enim a arcu imperdiet malesuada. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. </p> 
       <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Ut tempus purus at lorem. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Phasellus faucibus molestie nisl. Nunc dapibus tortor vel mi dapibus sollicitudin. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Proin mattis lacinia justo. In enim a arcu imperdiet malesuada. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. </p> 
       <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Ut tempus purus at lorem. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Phasellus faucibus molestie nisl. Nunc dapibus tortor vel mi dapibus sollicitudin. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Proin mattis lacinia justo. In enim a arcu imperdiet malesuada. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. </p> 
       <p id="abc">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Ut tempus purus at lorem. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Phasellus faucibus molestie nisl. Nunc dapibus tortor vel mi dapibus sollicitudin. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Proin mattis lacinia justo. In enim a arcu imperdiet malesuada. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. </p> 
       <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Ut tempus purus at lorem. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Phasellus faucibus molestie nisl. Nunc dapibus tortor vel mi dapibus sollicitudin. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Proin mattis lacinia justo. In enim a arcu imperdiet malesuada. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. </p> 
    </div>
</body>
</html>

Historicky: jak vytvořit sloupek

  1. <div> prvek obtékaný dalším
  2. tabulka
  3. absolutní / relativní pozicování

Absolutní pozicování příklad

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="utf-8" />
    <title>Titulek</title>
 
    <style>
        div#vsechno {
            position: relative;
        }
 
        div#sloupek {
            position: absolute;
            background-color: green;
            width: 30%;
            height: 120px;
            float: left;
        }
        #sloupek a{
            color: white;
        }
 
        div#hlavni {
            position: absolute;
            background-color: grey;
            left: 30%;
            width: 70%;
        }
 
        p {
            font-size: 130%; 
            font-family: monospace;
        }
    </style>
 
    <script>
 
 
    </script>
</head>
 
<body>
    <div id="vsechno">
        <div id="sloupek">
            <p>Test</p>
            <ul>
                <li><a href="#abc">Nejaky seznam</a></li>
            </ul>
        </div>
 
        <div id="hlavni">
        <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis condimentum augue id magna semper rutrum. Cras elementum. Integer pellentesque quam vel velit. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Cras elementum. Nullam eget nisl. Fusce nibh. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Mauris metus. Proin mattis lacinia justo. Fusce wisi. Integer imperdiet lectus quis justo. Donec vitae arcu. Nulla pulvinar eleifend sem. Phasellus et lorem id felis nonummy placerat. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Ut tempus purus at lorem. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Phasellus faucibus molestie nisl. Nunc dapibus tortor vel mi dapibus sollicitudin. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Proin mattis lacinia justo. In enim a arcu imperdiet malesuada. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. </p> 
        </div>
    </div>
</body>
</html>

Nové možnosti: Flexbox

Snaží se být agnostický row/column (nebo třeba reverse-column!) 

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="utf-8" />
    <title>Titulek</title>
 
    <style>
        div#vsechno {
            display: flex;
        }
 
        div#sloupek {
            min-width: 12em;
            flex: 1;
            width: 30%;
            background-color: green;
        }
        #sloupek a{
            color: white;
        }
 
        div#hlavni {
            padding-left: 1em;
            flex: 4;
            background-color: grey;
        }
 
        p {
            font-size: 130%; 
            font-family: monospace;
        }
    </style>
 
    <script>
 
 
    </script>
</head>
 
<body>
    <div id="vsechno">
 
        <div id="sloupek">
            <p>Test</p>
            <ul>
                <li><a href="#abc">Nejaky seznam</a></li>
            </ul>
        </div>
 
        <div id="hlavni">
        <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis condimentum augue id magna semper rutrum. Cras elementum. Integer pellentesque quam vel velit. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Cras elementum. Nullam eget nisl. Fusce nibh. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Mauris metus. Proin mattis lacinia justo. Fusce wisi. Integer imperdiet lectus quis justo. Donec vitae arcu. Nulla pulvinar eleifend sem. Phasellus et lorem id felis nonummy placerat. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Ut tempus purus at lorem. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Phasellus faucibus molestie nisl. Nunc dapibus tortor vel mi dapibus sollicitudin. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Proin mattis lacinia justo. In enim a arcu imperdiet malesuada. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. </p> 
        </div>
    </div>
</body>
</html>