HTML/CSS - Jak ustawić 3 Div'y (float: left;) tak aby były zawsze na szerokość przeglądarki?

pytanie zadane 18 kwietnia 2016 w HTML i CSS przez Pablo99 Obywatel (1,110 p.)

Witam,tak jw. Mam ustawiony header na width: 100%; chciałbym tak zrobić z 3 divami pod headerem. W skrócie nav,content,ad nie rozchodzą się na całą wielkość przeglądarki jak to zrobić?

2 odpowiedzi

odpowiedź 18 kwietnia 2016 przez Artur Wraga Obywatel (1,870 p.)
wybrane 18 kwietnia 2016 przez Pablo99

Najlepsza

width: 33%; dla każdego z nich. margin i padding na 0; tak sądzę :) w content mozesz dac 34 zamiast 33 bo 3x33 jest 99 :) ale tak jak kolega powiedzial bez kodu ciezko cos doradzic.

komentarz 18 kwietnia 2016 przez Pablo99 Obywatel (1,110 p.)

Dzięki, już wszystko działa tak jak powinno. ;)

komentarz 18 kwietnia 2016 przez jpacanowski VIP (101,940 p.)

Będąc dokładniejszym

width: 33.33333333%;

1	komentarz 19 kwietnia 2016 przez Eimens Maniak (69,240 p.) up będąc jeszcze bardziej dokładnym width: calc(100% / 3); Zamiast pisać trójki po przecinku...

odpowiedź 18 kwietnia 2016 przez niezalogowany

Bez pokazania kodu, dowiesz się tutaj tylko tyle, że musisz to zrobić tak samo jak to zrobiłeś z headerem.

komentarz 18 kwietnia 2016 przez HaKIM Szeryf (87,590 p.)

Przydałoby się również zdjęcie/link do strony, aby nie musieć tworzyć nowego pliku, aby sprawdzić rezultaty kodu.

komentarz 18 kwietnia 2016 przez Pablo99 Obywatel (1,110 p.)
edycja 18 kwietnia 2016 przez Pablo99

body
{
	background-image: url("bgimg.png");
	font-family: "Verdana";
	margin: 0 !important;
}
.container
{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.header
{
	width: 100%;
	background-color: #306CA6;
	color: gray;
	text-align: center;
	padding: 10px;
}
.nav
{
	width: 100%;
	padding: 10px 0;
	text-align:center;
	background-image: url("bgimg.png");
}
.sidebar
{
	width: 200px;
	min-height: 600px;
	background-color: darkgray;
	color: silver;
	text-align: left;
	padding: 10px;
	float: left;
}
.content
{
	background-color: #D4B32F;
	width: 870px;
	min-height: 600px;
	color: black;
	padding: 10px;
	text-align: center;
	float: left;
}
.ad
{
	width: 200px;
	min-height: 600px;
	max-height: 600px;
	background-color: darkgray;
	padding: 10px;
	text-align: center;
	float: left;
}
.footer
{
	clear: both;
	background-color: #306CA6;
	color: gray;
	text-align: center;
	padding: 10px;
}
h1
{
	font-size:40px;
	background: url(headerimg.png) repeat;
	color: white;  
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
h2
{
	color: #394747;
	font-size:25px;
}
h3
{
	font-size:15px;
	color: #453538;
}

.sticky
{
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
}
a:link
{
	color: silver;
}
a:visited
{
	color: silver;
}
a:hover
{
	color: red;
}
ol
{
	padding: 0;
	margin: 0;
	list-style-type: none;
	font-size: 18px;
	height: 35px;
	line-height: 200%;
	display: inline-block;
}

ol a
{
	color: #ffffff;
	text-decoration: none;
	display: block;
}

ol > li
{
	float: left;
	width: 150px;
	height: 40px;
	border-right: 1px dashed #751b1b;
}

ol > li:first-child
{
	border-left: 1px dashed #751b1b;
}

ol > li:hover
{
	background-color: #cf6969;
}

ol > li:hover > a
{
	color: #451717;
}

ol > li > ul
{
	list-style-type: none;
	padding: 0;
	margin: 0;
	height: 40px;
	display: none;
}

ol > li:hover > ul
{
	display: block;
}

ol > li > ul > li
{
	background-color:#cf6969;
	position: relative;
	z-index: 100;
	border-top: 1px dashed #751b1b;
}

ol > li > ul > li:hover
{
	background-color: #c34f4f;
}

ol > li > ul > li:hover > a
{
	color: #451717;
}

komentarz 18 kwietnia 2016 przez niezalogowany

eh.. Edytuj ładnie swoje pytanie, i wstaw kody używając do tego odpowiednich narzędzi z edytora / podeślij link do strony. Nikt nie będzie szukał dodatkowych informacji dotyczących problemu gdzieś w komentarzach.

(Sebastian Brożek, nie ma co się bawić w tworzenie nowych plików, ja zawsze do codepena sobie wklepuję : )