De border plaatje willen niet automatisch naar einde van div gaan

MouNtant · 15 dec 2012

Hallo!

Ik ben bezig met een layout van een website. Hierbij heb ik de volgende structuur:

HTML:

<div id="container">
		<div id="borderLeft"></div>
		
		<div id="websiteContainer">
			<div id="header"></div>
		</div>

		<div id="borderRight"></div>
		<div style= "clear:both">
	</div>

en deze css

HTML:

body {
	background-color: #EFEFEF;
	text-align: center;
}

#container{
	text-align: left;
	background-color: green;
	width: 1006px;
	height: auto;
	margin: 0 auto;
}

#borderLeft{
	background-image: url("../images/BorderLeft.jpg");
	background-repeat: repeat-y;
	width: 16px;
	height: auto;
	float:left;
}

#websiteContainer
{
	width: 974px;
	float:left;
	background-color: blue;
}

#borderRight{
	background-image: url("../images/BorderRight.jpg");
	background-repeat: repeat-y;
	width: 16px;
	height: inherit;
	float:left;
}


#header{
	width: 954px;
	height: 74px;
	margin: 5px 10px 0 10px;
	background-color: red;
}

Ik heb dus een container waar alles in gaat. In deze container zit links een border left en recht de rechtse. Daar tussen komt de website.
Wat mij niet lukt is om de border tot het einde van de container automatisch te laten lopen. Doe ik iets fout of gewoon weg niet goed

of is dit niet mogelijk?

csshunter · 15 dec 2012

Hoi MouNtant,
Op deze manier zal het niet gaan, want floats staan altijd losgekoppeld: zowel van de normal flow van de html-elementen als van elkaar. Dan kunnen ze niet een corresponderende hoogte aannemen.

Wat wel kan:

De #container 32px breder maken.
Daar een gecombineerde "border-left * middenstuk * border-right" in zetten als background-image dat zicht met repeat-y herhaalt zo hoog als de #container is.
De <div id="borderLeft"> en <div id="borderRight"> kunnen richting open haard.
De #header met achtergrond-kleur of achtergrond-afbeelding zit binnen de #container, dus die wordt er automatisch overheen geplakt. Desgewenst kan die ook L en R wat breder worden om daar de borders te overlappen.
De clear-div op het eind kan er ook uit, want de #container hoeft niet meer te floaten.
De #container is nu niet meer nodig en kan samenvallen met de #websiteContainer.
En tenslotte is de #websiteContainer ook overbodig en verdwijnt ook: de css kan aan de body vastgemaakt worden.

Dat ruimt lekker op!

HTML:

<body>
     <div id="header"></div>
     ...
     content
     ...
</body>

Code:

body {
    width: 1006px;
    margin: 0 auto;
    background: #EFEFEF url("../images/combi-background.jpg") repeat-y;
}
 
#header{
    width: 954px;
    height: 74px;
    margin: 0 auto;
    border-top: 5px solid #EFEFEF; /* over de L/R "borders" van het background-img heen geplakt */ 
    background-color: red;
}

Eventueel kan de #header ook nog L/R en Bottom-borders krijgen om helemaal los te komen van de rest.

Met vriendelijke groet,
CSShunter

MouNtant · 15 dec 2012

Super Css Hunter!

Het is gefixt en het is inderdaad zo veel meer opgeruimd

gr Stefan

De border plaatje willen niet automatisch naar einde van div gaan

MouNtant

Gebruiker

csshunter

Meubilair

MouNtant

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy