De border plaatje willen niet automatisch naar einde van div gaan

Status
Niet open voor verdere reacties.

MouNtant

Gebruiker
Lid geworden
2 jul 2011
Berichten
42
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?
 
Laatst bewerkt:
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
 
Laatst bewerkt:
Super Css Hunter!

Het is gefixt en het is inderdaad zo veel meer opgeruimd ;)

gr Stefan
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan