Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

CSS: Anpassa en div containers background-color till hela innehållets height?

1
Skriv svar
Permalänk
Medlem
●

CSS: Anpassa en div containers background-color till hela innehållets height?

Jag har haft ett problem ganska länge som jag nu måste ta tag i...

Problemet består i att jag har en container div som innehåller två andra divar som centreras på sidan. Jag vill att innehållet i de divarna ska vara bredvid varandra och innehållet ska börja högst upp i båda.

Den vänstra diven ska ha sitt innehåll vänsteralignat och den högra diven ska sitt innehåll alignat åt höger.

Jag har därför använt mig av float. När jag lägger till float så slutar bakgrundsfärgen i container (parent) diven att ha sin bakgrundsfärg lika hög som sitt innehåll är. Jag har satt en minihöjd i detta exempel med min-height till 100px eftersom jag vill ha en viss minihöjd som ska kunna utökas om innehållet blir för stort för att få plats. I detta exempel är innehållet i pagewide diven högre än 100px och jag vill hitta en lösning som gör att bakgrundsfärgen (röd) i pagewide blir lika hög som innehållet.

Vilket är det bästa sättet att lösa detta på? Jag har testat ALLT som jag kan komma på utan en bra lösning...

För att illustrera problemet har jag gjort denna förenkling av min html/css:

<html>
<head>
    <title></title>

    <style type="text/css">
        body {
            background-color: white;
            margin: 0;
        }    
        
        .pagewide {
	    background-color: red;
	    min-height: 100px;
        }
    
        .contentsection {
	    width: 400px;
	    min-height: 100px;
	    margin: 0 auto;
	    background-color: blue;
        }
    
        .latin {
            float: left;
	    padding: 0px;
            margin: 0 auto;
	    width: 200px;
	    height: 100%;
	    background-color: green;
        }
        
        .svenska {
            float:right;
            text-align: right;
            width: 200px;
            background-color: gray;            
        }
    </style>

</head>
<body>
    <div class="pagewide">
        <div class="contentsection">
            <div class="latin">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
            <div class="svenska">
                Svensk text
            </div>
        </div>
    </div>
</body>
</html>
Senast redigerat
Visa signatur

The Programmer

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av TheProgrammer:

Jag har haft ett problem ganska länge som jag nu måste ta tag i...

Problemet består i att jag har en container div som innehåller två andra divar som centreras på sidan. Jag vill att innehållet i de divarna ska vara bredvid varandra och innehållet ska börja högst upp i båda.

Den vänstra diven ska ha sitt innehåll vänsteralignat och den högra diven ska sitt innehåll alignat åt höger.

Jag har därför använt mig av float. När jag lägger till float så slutar bakgrundsfärgen i container (parent) diven att ha sin bakgrundsfärg lika hög som sitt innehåll är. Jag har satt en minihöjd i detta exempel med min-height till 100px eftersom jag vill ha en viss minihöjd som ska kunna utökas om innehållet blir för stort för att få plats. I detta exempel är innehållet i pagewide diven högre än 10px och jag vill hitta en lösning som gör att bakgrundsfärgen (röd) i pagewide blir lika hög som innehållet.

Vilket är det bästa sättet att lösa detta på? Jag har testat ALLT som jag kan komma på utan en bra lösning...

För att illustrera problemet har jag gjort denna förenkling av min html/css:
[SPOILER]

<html>
<head>
    <title></title>

    <style type="text/css">
        body {
            background-color: white;
            margin: 0;
        }    
        
        .pagewide {
	    background-color: red;
	    min-height: 100px;
        }
    
        .contentsection {
	    width: 400px;
	    min-height: 100px;
	    margin: 0 auto;
	    background-color: blue;
        }
    
        .latin {
            float: left;
	    padding: 0px;
            margin: 0 auto;
	    width: 200px;
	    height: 100%;
	    background-color: green;
        }
        
        .svenska {
            float:right;
            text-align: right;
            width: 200px;
            background-color: gray;            
        }
    </style>

</head>
<body>
    <div class="pagewide">
        <div class="contentsection">
            <div class="latin">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
            <div class="svenska">
                Svensk text
            </div>
        </div>
    </div>
</body>
</html>
Gå till inlägget

[/SPOILER]

Om jag förstår detta rätt.

<html>
<head>
    <title></title>

    <style type="text/css">
        body {
            background-color: white;
            margin: 0;
        }    
        
        .pagewide {
	    background-color: red;
	    min-height: 100px;
        }
    
        .contentsection {
	    width: 400px;
	    min-height: 100px;
	    margin: 0 auto;
	    background-color: blue;
        }
    
        .latin {
            float: left;
	    padding: 0px;
            margin: 0 auto;
	    width: 200px;
	    height: 100%;
	    background-color: green;
        }
        
        .svenska {
            float:right;
            text-align: right;
            width: 200px;
            background-color: gray;            
        }
        .clear
        {
               clear:both;
        }
    </style>

</head>
<body>
    <div class="pagewide">
        <div class="contentsection">
            <div class="latin">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
            <div class="svenska">
                Svensk text
            </div>
           <div class="clear"></div>
        </div>
    </div>
</body>
</html>

Lägg till det jag precis skrev i fetstilt.

Dvs

En ny div som du ger

clear:both;

i css:en

Senast redigerat
Visa signatur

How to program

Redigera
Citera flera Citera
Permalänk
Medlem
●

Taaada: http://jsfiddle.net/ck66s/

La in en clear: both;. Men man brukar använda något som kallas clearfix (http://www.webtoolkit.info/css-clearfix.html). Gör samma sak men funkar i fler fall + i IE6.

EDIT:

Läs mer om clearfix här: http://stackoverflow.com/questions/211383/which-method-of-cle...

Visa signatur

Programmerare -> PHP | HTML | CSS | JS | Java.

> Sweclockers Marknads Referenser <

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag hade testat clear men uppenbarligen på fel ställe...

Tack båda två! Vet ni nån bra bok om CSS? Verkar som om jag behöver det

Visa signatur

The Programmer

Redigera
Citera flera Citera
Permalänk
Entusiast
●
Skrivet av TheProgrammer:
Gå till inlägget

Strukturen du behöver är väll egentligen:

<container>		margin:0 auto; width:400px;
	<vänster div/>	Float:left; width:50%;
	<höger div/>	Float:left; width:50%;
	<footer/>	Clear:both; width 100%;
</container>

Dock gör detta bara att bakgrundsfärgen på containern följer med, inte de individuella rutorna

Visa signatur

Mörkt tema till sweclockers | Taklampa med socket 1155

Redigera
Citera flera Citera
1
Skriv svar