Witam, mam taki dokument HTML/CSS:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<style>
#cont {
margin-left: auto;
margin-right: auto;
min-width: 400px;
max-width: 700px;
background-color: #363636;
color: #ffffff;
font-size: 15px;
}
.col1 {
float: left;
width: 250px;
background-color: #5951a5;
}
.col2 {
float: left;
background-color: #b31a1a;
}
</style>
</head>
<body>
<div id="cont">
<div class="col1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae eleifend sem. Pellentesque tortor arcu, luctus quis ornare in, bibendum at augue. Vestibulum fermentum maximus metus, sed tempor augue consectetur eget. Ut finibus laoreet felis sit amet rhoncus. Quisque vitae augue id nibh fermentum euismod. Curabitur laoreet ex vel eros imperdiet, sed faucibus est dictum. Phasellus lectus quam, tincidunt eget ante ac, maximus pulvinar ipsum. Maecenas hendrerit sapien ut placerat porttitor. Praesent id lacus non massa eleifend tempor a quis elit. Vestibulum eu luctus purus, ac lacinia mi. Etiam interdum maximus dolor et porta. Duis rutrum dolor et felis aliquet consectetur. Donec vel dapibus enim. Sed eu scelerisque est. Ut at purus sed sem pulvinar tincidunt ac vitae nisl.</div>
<div class="col2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae eleifend sem. Pellentesque tortor arcu, luctus quis ornare in, bibendum at augue. Vestibulum fermentum maximus metus, sed tempor augue consectetur eget. Ut finibus laoreet felis sit amet rhoncus. Quisque vitae augue id nibh fermentum euismod. Curabitur laoreet ex vel eros imperdiet, sed faucibus est dictum. Phasellus lectus quam, tincidunt eget ante ac, maximus pulvinar ipsum. Maecenas hendrerit sapien ut placerat porttitor. Praesent id lacus non massa eleifend tempor a quis elit. Vestibulum eu luctus purus, ac lacinia mi. Etiam interdum maximus dolor et porta. Duis rutrum dolor et felis aliquet consectetur. Donec vel dapibus enim. Sed eu scelerisque est. Ut at purus sed sem pulvinar tincidunt ac vitae nisl.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae eleifend sem. Pellentesque tortor arcu, luctus quis ornare in, bibendum at augue. Vestibulum fermentum maximus metus, sed tempor augue consectetur eget. Ut finibus laoreet felis sit amet rhoncus. Quisque vitae augue id nibh fermentum euismod. Curabitur laoreet ex vel eros imperdiet, sed faucibus est dictum. Phasellus lectus quam, tincidunt eget ante ac, maximus pulvinar ipsum. Maecenas hendrerit sapien ut placerat porttitor. Praesent id lacus non massa eleifend tempor a quis elit. Vestibulum eu luctus purus, ac lacinia mi. Etiam interdum maximus dolor et porta. Duis rutrum dolor et felis aliquet consectetur. Donec vel dapibus enim. Sed eu scelerisque est. Ut at purus sed sem pulvinar tincidunt ac vitae nisl.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae eleifend sem. Pellentesque tortor arcu, luctus quis ornare in, bibendum at augue. Vestibulum fermentum maximus metus, sed tempor augue consectetur eget. Ut finibus laoreet felis sit amet rhoncus. Quisque vitae augue id nibh fermentum euismod. Curabitur laoreet ex vel eros imperdiet, sed faucibus est dictum. Phasellus lectus quam, tincidunt eget ante ac, maximus pulvinar ipsum. Maecenas hendrerit sapien ut placerat porttitor. Praesent id lacus non massa eleifend tempor a quis elit. Vestibulum eu luctus purus, ac lacinia mi. Etiam interdum maximus dolor et porta. Duis rutrum dolor et felis aliquet consectetur. Donec vel dapibus enim. Sed eu scelerisque est. Ut at purus sed sem pulvinar tincidunt ac vitae nisl.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae eleifend sem. Pellentesque tortor arcu, luctus quis ornare in, bibendum at augue. Vestibulum fermentum maximus metus, sed tempor augue consectetur eget. Ut finibus laoreet felis sit amet rhoncus. Quisque vitae augue id nibh fermentum euismod. Curabitur laoreet ex vel eros imperdiet, sed faucibus est dictum. Phasellus lectus quam, tincidunt eget ante ac, maximus pulvinar ipsum. Maecenas hendrerit sapien ut placerat porttitor. Praesent id lacus non massa eleifend tempor a quis elit. Vestibulum eu luctus purus, ac lacinia mi. Etiam interdum maximus dolor et porta. Duis rutrum dolor et felis aliquet consectetur. Donec vel dapibus enim. Sed eu scelerisque est. Ut at purus sed sem pulvinar tincidunt ac vitae nisl.</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
Zleży mi żeby kolumna pierwsza miała stałą szerokość a druga wypełniała resztę wolnej przestrzeni, ważne jest też to żeby bloki te były ustawione "w jednej linii" ( równolegle ). Rezultat niestety jednak prezentuje się tak:
Próbowałem wielu rzeczy, np. ustawić dla col2 :
width: auto;
ale nic z tego :./
Jak mogę sobie z tym poradzić? Z góry dziękuje za odpowiedź i pozdrawiam ;)
