CSS div-boxen horizontal anordnen, volle breite ausnutzen

koffi · 4. Dezember 2013

hallo!

es ist mal wieder zeit für css und für mich ist das die zeit der unlösbaren probleme.

ich möchte div-bereiche horizontal und vertikal anordnen. dazu benutze ich clearfix. das problem: ich möchte dass die rechte box "Content" die volle restliche breite ausnutzt.

hier im bild besser zu sehen:
http://i.imgur.com/jWoqi8m.jpg

hier der code:
HTML

Code:

<article>
				<div id="a">
					<div class="clearfix">

						<div class="boxes_column">
							<div class="box" id="box_login">
								Profile
							</div>
							<div class="box" id="box_navigation">
								Navigation
							</div>
						</div>
						<div class="boxes_column">
							<div class="box" id="box_content">
								Content
							</div>
						</div>
						<div class="clear"></div>

					</div>
				</div>

			</article>

CSS

Code:

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
	font-size: 13px;
	background-image: url('../art/background.gif');
}

header {
	color: #ffffff;
	height: 60px;
	background-color: #000;
	background: linear-gradient(top, #404040,    #101010);
	background: -webkit-linear-gradient(top, #404040,    #101010);
	background-image: -moz-linear-gradient(top, #404040, #101010);
	box-shadow: 0px 2px 2px #777777;
}
article {
	margin: 15px 15px 15px 15px;
}

/*----------------------------CLEARFIX----------------------------*/
/*----------------------------for horizontal div align----------------------------*/
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}

/*--------------------------------------------------------*/

/*----------------------------HEADER----------------------------*/
#header_navigation {

}
#header_navigation ul li {
	display: inline-block;
	list-style: none outside none;
	padding: 0px;
	margin: 0px;
}
#logo {
	height: 80px;
}

/*--------------------------------------------------------*/

/*----------------------------BOXING----------------------------*/

.box {
	background-color: #d3d3d3;
	border-style: solid;
	border-width: 2px;
	border-color: #505050;
	min-width: 180px;
	min-height: 160px;
	margin: 15px 0 0 15px;
}
.boxes_column {
	float: left;
}
#box_login {
	width: 180px;
	height: 30px;
}
#box_navigation {
	width: 180px;
	height: 400px;
}
#box_content {
	height: 400px;
	width: auto;
	
}
#a {
	background-color: white;
}

/*--------------------------------------------------------*/

eigentlich sollte eine div doch automatisch die volle restliche breite ausnutzen, wenn sie keine anderen vorgaben hat, oder?
habe es bereits mit width:100% im #box_content versucht, oder width komplett weggelassen.. nutzt alles nichts!
kann mir jemand bitte helfen?

vielen dank im vorraus

nappel4life · 4. Dezember 2013

Bin zwar kein Coder oder so, und kenne mich recht wenig aus damit. Aber kann es sein dass durch .boxes_column und float left der Content dann automatisch auf 180px breite gesetzt wird.?

koffi · 4. Dezember 2013

ich wüsste nicht, warum das so sein sollte.. und wenn: wie umgehe ich es dann?

Daaron · 4. Dezember 2013

Floatende Elemente sind immer so kompakt wie möglich. Wenn du weißt, wie breit die linke Spalte ist, dann lass die rechte nicht floaten sondern gib ihr nur ein margin-left >= der Breite der linken Spalte. Das sollte funktionieren

Aber noch ein paar allgemeine Tips:
- Dein Clearfix sieht eigenartig aus. Auf der einen Seite verlässt du dich auf :before/:after, auf der anderen Seite packst du ein semantisch nutzloses Clear-<div> ans Ende deiner Spalten. Also entweder du arbeitest nur mit den Pseudo-Elementen (und scheißt auf IE7, so wie es sich gehört), oder du arbeitest mit nem Sinnlos-Element. Beides zusammen mag funktionieren, ist aber pure Bandbreitenverschwendung.
Ich bin bei floatenden Spalten dazu übergegangen, der letzten Spalte eine "column-last"-Klasse mitzugeben. Dazu gibts dann

Code:

.column-last + *{clear:left;}

. Klappt bisher wunderbar.

- Anstatt zu floaten kannst du auch auf CSS3 setzen. Das setzt natürlich voraus, dass du IE8 (und niedriger) sowie richtig derb veraltete Versionen von Firefox & Co getrost in den Wind schießen kannst. Das Zauberwort heißt "display:flex". Für den IE9 sowie leicht veraltete FF&Co musst du parallel noch das Flexbox-Legacy - Zeug eintragen.

- Alternativ für dein Problem, wieder mit der Einschränkung, dass es im IE7 nicht gehen wird: display:table; und table-cell;
Wenn ein Container auf table steht und width:100% hat, ordnen sich alle Kinder mit table-cell schön nebeneinander über die gesamte Breite an. Den Kindern dürfte man dabei noch eigene Breiten geben können.

koffi · 5. Dezember 2013

das hat mir sehr geholfen. danke für die mühe

edit:

EDIT 2: PROBLEM GELÖST SIEHE GANZ UNTEN

habe es zunächst mit flex probiert. sah anfangs auch echt gut aus, habe das aber wieder aufgegeben, da ich nicht will dass sich die bereiche im browser zoom dynamisch mitverändern. außerdem scheint es bei smartphones schlecht anzukommen (elemente werden bei mangelndem platz untereinander dargestellt).

jetzt mache ich es mit display:table. scheint vielversprechend zu sein (habe mich hier eingelesen), jedoch kommt in der praxis ein ziemlicher salat bei raus, und ich kann mir nicht erklären warum!

so schauts aus: http://i.imgur.com/nzR0pyz.png
die anordnung soll aber sein wie im bild von post#1

Code:

<article>

				<div class="table_container">

					<div class="table_column">
						<div class="box" id="box_login">
							<div class="box_banner">
								<?php echo $string["welcome"]; ?>
							</div>
							<div class="box_content">

							</div>
						</div>
						<div class="box" id="box_navigation">
							<div class="box_banner">
								<?php echo $string["navigation"]; ?>
							</div>
						</div>
					</div>
					<div class="table_column_main">
						<div class="box" id="box_main">

						</div>
						<div class="box" id="box_info">
							<div class="box_banner">
								<?php echo $string["info"]; ?>
							</div>
						</div>
					</div>
				</div>


			</article>

Code:

/*----------------------------GENERAL----------------------------*/

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
	font-size: 13px;
	color: #ffffff;
	background-image: url('../art/background.png');
}

header {
	height: 60px;
	background-color: #000;
	background: linear-gradient(top, #404040,    #101010);
	background: -webkit-linear-gradient(top, #404040,    #101010);
	background-image: -moz-linear-gradient(top, #404040, #101010);
	box-shadow: 0px 2px 2px black;
}
article {
	margin: 15px 30px 15px 15px;
}
/*--------------------------------------------------------*/

/*----------------------------HEADER----------------------------*/
#header_navigation {

}
#header_navigation ul li {
	display: inline-block;
	list-style: none outside none;
	padding: 0px;
	margin: 0px;
}
#logo {
	height: 80px;
	margin: 2px 0 0 6px;
}

/*--------------------------------------------------------*/

/*----------------------------TABLES----------------------------*/
.table_container {
	display: table;
}
.table_column {
	display: table-cell;
	width: 180px;
}
.table_column_main {
	display: table-cell;
	width: 100%;
}

/*--------------------------------------------------------*/

/*----------------------------BOXING----------------------------*/

.box {
	background-color: rgba(0, 0, 0, 0.9);
	box-shadow: 0px 2px 2px black;
	min-width: 180px;
	min-height: 160px;
	margin: 15px 0 0 15px;
	border-style: solid;
	border-width: 2px;
	border-color: black;
}
.box_banner {
	height: 20px;
	background-color: #000;
	background: linear-gradient(top, #404040,    #101010);
	background: -webkit-linear-gradient(top, #404040,    #101010);
	background-image: -moz-linear-gradient(top, #404040, #101010);
	font-weight: bold;
	padding: 6px 0 0 8px;
}
.box_content {

}

/*individual boxes*/
#box_login {	
	height: 160px;
	display: block;
}
#box_navigation {
	height: 400px;
	display: block;
}
#box_main {
	height: 400px;
	display: block;
}
#box_info {
	height: 200px;
	display: block;
}

/*--------------------------------------------------------*/

EDIT 2: PROBLEM GELÖST

das problem war wohl, dass box_main keinen content hatte.

Suche

CSS div-boxen horizontal anordnen, volle breite ausnutzen

koffi

Lt. Junior Grade

nappel4life

Cadet 4th Year

koffi

Lt. Junior Grade

Daaron

Fleet Admiral

koffi

Lt. Junior Grade

Ähnliche Themen