webForumDet fria alternativet
Logga in / Bli medlem

Centrera divar i en större div

13 svar · 872 visningar · startad av Skivan

SkivanMedlem sedan feb. 20108 inlägg
#1

Hej.
Jag har sökt här och på google och hittat ett liknande problem, men jag lyckades inte lösa mitt i alla fall, så jag bifogar min kod och hoppas att någon kan hjälpa mig.

Mitt problem är att jag på min för övrigt vänsterställda sida, vill ha tre divar centrerade i en större div.

Ett annat problem som dök upp under tiden är, varför hamnar de inre blåramade divarna utanför den större rödramade diven om jag inte har "clear: both;" efter smådivarna? I mitt homesite-program så sträcker sig nu smådivarna utanför den blå ramen som slutar efter smådivarnas rubrik, vilket det inte verkar göra i FF. Kanske homesite är kass/för gammal eller så är det så här i vissa andra webbläsare också. Jag använder Homesite bara för att få färg på min kod och för att kunna förhandsgranska enkelt (skriver allt för hand), men det är ju inte så bra om det ändå blir fel...

Som ni förstår så är jag inte helt hemma med divformatering och har ofta låtit mina gamla tabellformateringar följa med. Detta är första gången jag försöker centrera floatdivar inuti en större div. Annars har div-formatering fungerat felfritt för mig, med floatar, wrappar och lite annat.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="sv">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<title>skit</title>
	
	<style type="text/css">
	#box { width: 950px; margin: auto; text-align: center; }
	#content
    {
	width: 663px;
	min-height: 580px;
	float: left;			
	padding-top: 5px;
	padding-bottom: 12px;
	padding-left: 20px;
	padding-right: 15px;
	text-align: left;
    }
	.smadivar
	{
	float: left;
	border: 1px solid blue;
	text-align: left;
	margin: auto;
	}
	.container
	{
	text-align: center;
	border: 1px solid red;
	}
	</style>

</head>

<body>

<div id="box">

<!--  START -->
<div id="content">

<h1>Rubrik som ska vara h&auml;r till v&auml;nster</h1>
<p>Br&ouml;dtext p&aring; sidan ska vara v&auml;nsterjusterad.</p>

<div class="container">

<div class="smadivar">
<h3>Rubrik 1</h3>
lista
<br>
&ouml;ver
<br>
massa
<br>
saker
</div>

<div class="smadivar">
<h3>Rubrik 2</h3>
lista
<br>
&ouml;ver
<br>
massa
<br>
saker
</div>

<div class="smadivar">
<h3>Rubrik 3</h3>
lista
<br>
&ouml;ver
<br>
massa
<br>
saker
</div>

<br style="clear: both; " >

</div>

</div>
<!-- STOP -->

</div>

</body>
</html>
IcebreakerMedlem sedan juni 2000516 inlägg
#2

Inte testat koden, men overflow:hidden i parent-diven kanske?

SkivanMedlem sedan feb. 20108 inlägg
#3

Tack för ditt svar.

Det gjorde varken till eller från.

Jag har förresten flyttat CSS-koden för container till ovanför smådivarna i stället för under. Det gjorde varken till eller från heller.

TibbelitMedlem sedan mars 200986 inlägg
#4

Om du vet att du bara vill ha 3st divar i den stora diven kan du ju ge dem en bredd och hur långt avståndet till vänster ska vara: se såhär:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="sv">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<title>skit</title>
	
	<style type="text/css">
	#box { width: 950px; margin: auto; text-align: center; }
	#content
    {
	width: 663px;
	min-height: 580px;
	float: left;			
	padding-top: 5px;
	padding-bottom: 12px;
	padding-left: 20px;
	padding-right: 15px;
	text-align: left;
    }
	.smadivar
	{
	float: left;
	border: 1px solid blue;
	text-align: left;
	margin-left:6.25%;
	width:25%;
	}
	.container
	{
	text-align: center;
	border: 1px solid red;
	}
	</style>

</head>

<body>

<div id="box">

<!--  START -->
<div id="content">

<h1>Rubrik som ska vara h&auml;r till v&auml;nster</h1>
<p>Br&ouml;dtext p&aring; sidan ska vara v&auml;nsterjusterad.</p>

<div class="container">

<div class="smadivar">
<h3>Rubrik 1</h3>
lista
<br>
&ouml;ver
<br>
massa
<br>
saker
</div>

<div class="smadivar">
<h3>Rubrik 2</h3>
lista
<br>
&ouml;ver
<br>
massa
<br>
saker
</div>

<div class="smadivar">
<h3>Rubrik 3</h3>
lista
<br>
&ouml;ver
<br>
massa
<br>
saker
</div>

<br style="clear: both; " >

</div>

</div>
<!-- STOP -->

</div>

</body>
</html>

Antagligen inte det smidigaste, men det fungerar ;)

SkivanMedlem sedan feb. 20108 inlägg
#5

Jo, men eftersom jag vet att det bör gå att låta dem flyta centrerat (eller går det inte?) så vill jag inte göra på det sättet ^_^

jawbreakerMedlem sedan jan. 2003296 inlägg
#6

Grejen är att du inte vill sätta fast bredd på "smådivarna" eller? Om det går att sätta en fast storlek på dem (och då även container-div:en) är det enkelt att centrera container-diven på samma sätt som sidan i sig centreras. Annars kan du använda dig av display: inline-block på dina smådivar:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html lang="sv">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

	<title>skit</title>

	<style type="text/css">
	body
	{
		margin: 0 auto;
		width: 950px;
	}

	#content
	{
		width: 663px;
		min-height: 580px;
		float: left;
		padding-top: 5px;
		padding-bottom: 12px;
		padding-left: 20px;
		padding-right: 15px;
	}

	.smadivar
	{
		border: 1px solid blue;
		display: inline-block;
		text-align: left;
	}

	.container
	{
		border: 1px solid red;
		text-align: center;
	}
	</style>

	<!--[if lte IE 7]>
	<style type="text/css">
	.smadivar
	{
		display: inline;
	}
	</style>
	<![endif]-->
</head>

<body>
<!--  START -->
	<div id="content">
		<h1>Rubrik som ska vara h&auml;r till v&auml;nster</h1>
		<p>Br&ouml;dtext p&aring; sidan ska vara v&auml;nsterjusterad.</p>

		<div class="container">
			<div class="smadivar">
				<h3>Rubrik 1</h3>
				lista
				<br>
				&ouml;ver
				<br>
				massa
				<br>
				saker
			</div>

			<div class="smadivar">
				<h3>Rubrik 2</h3>
				lista
				<br>
				&ouml;ver
				<br>
				massa
				<br>
				saker
			</div>

			<div class="smadivar">
				<h3>Rubrik 3</h3>
				lista
				<br>
				&ouml;ver
				<br>
				massa
				<br>
				saker
			</div>
		</div>
	</div>
<!-- STOP -->
</body>
</html>
SkivanMedlem sedan feb. 20108 inlägg
#7

Tusen tack jawbreaker. Inline-block har jag inte hört talas om, och vet inte exakt vad det gör, så det blir att googla på det nu då :)

Det fungerar, men jag har några följdfrågor som jag inte kan komma över.

1. Om jag skriver smådivarnas formatering (den formatering som du gav mig) direkt i smådivarna (inlineformatering), så fungerar det inte, varför? Det fungerar bara om jag har CSS separat. Snacka om att jag blev frustrerad när jag först inte fick det att fungera i min kod. Jag skriver ofta formatering inline och flyttar sedan ut den i stilmallar/CSS-script.

2. Tack, jag tar gärna emot det andra tipset om jag har fasta bredder. Jag får nämligen inte heller det att fungera. Vet inte varför. Men jag vet att jag kommer att behöva kunna det framöver.

EDIT: Det med fasta bredder fungerar alltså inte med text-align: center; - det fungerar så klart om man delar upp totala bredden och delar ut lämpliga marginaler.

SkivanMedlem sedan feb. 20108 inlägg
#8

Eventuellt fattar jag hur du menar nu.

För min sida som inte har något centrerat, blir det då en div som har text-align: center; inuti den en div som innehåller de tre smådivarna. (Om jag förstår rätt alltså.)

Jag kan inte få bort diven som innehåller smådivarna vad jag förstår? Kanske bättre i så fall med display: inline-block; även där då för att slippa en av de två omslutande divarna?
Alternativt centrera allt på sidan, men då behöva lägga till text-align: left; på det mesta.

Stämmer detta resonemang? Då behöver du inte skriva ihop någon exempelkod.

(Jag undrar i så fall ändå fortfarande över min fråga 1 i inlägget ovan.)

jawbreakerMedlem sedan jan. 2003296 inlägg
#9

1. Du testar i någon version av IE?

<!--[if lte IE 7]>
<style type="text/css">
.smadivar {
	display: inline;
}
</style>
<![endif]-->

IE 7 och tidigare förstår inte display: inline-block fullt ut men ovanstående lilla kodsnutt fixar så att det fungerar även i dessa webbläsare. Däremot får du problem om du vill baka in det inline...

Angående din sista fråga förstår jag nog inte riktigt hur du menar... För jag ser ingen anledning till att lägga till ytterligare en div inuti .container-div:en. Eller menar du något annat?

Det allra sista du skriver stämmer nog bra dock - du skulle kunna sätta text-align: center på #content, ta bort .container-div:en och sätta text-align: left på alla andra taggar i #content som ska vara vänsterställda.

SkivanMedlem sedan feb. 20108 inlägg
#10

Hej igen.

Först om fråga 1. Nej, jag testade inte i IE. Problemet uppstod när jag bakade in koden inline, för övrigt förstod den båda värdena (inline eller inline-block) och det fungerade om jag lade CSS-script i head. Men om det blir problem med inlineformatering med detta så är det ju förklaringen.

Det du inte förstod hur jag menade:
Jag ser inte hur jag ska blir av med en container om jag centrerar med text-align: center; i body eller content.

Jag får det antingen som i mitt exempel nedan, (där måste allt annat måste vänsterjusteras separat) eller, om jag inte vill centrera hela sidan, så måste jag lägga till ytterligare en container runt "container och smadivar" vilken centrerar enbart dessa.

Kan du ett smidigare sätt?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html lang="sv">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

	<title>skit</title>

	<style type="text/css">
	body
	{
		margin: 0 auto;
		width: 950px;
		text-align: center;
	}

	#content
	{
		width: 663px;
		min-height: 580px;
		float: left;
		padding-top: 5px;
		padding-bottom: 12px;
		padding-left: 20px;
		padding-right: 15px;
	}

	.smadivar
	{
		border: 1px solid blue;
		display: inline-block;
		text-align: left;
	}

	.container
	{
		border: 1px solid red;
		text-align: center;
	}
	</style>
</head>

<body>
<!--  START -->
	<div id="content">
	
		<h1>Rubrik som ska vara h&auml;r till v&auml;nster</h1>
		<p>Br&ouml;dtext p&aring; sidan ska vara v&auml;nsterjusterad.</p>
		
	      <div class="container">
                <div class="smadivar"><h3>Rubrik 1</h3></div>
                <div class="smadivar"><h3>Rubrik 2</h3></div>
                <div class="smadivar"><h3>Rubrik 3</h3></div>
              </div>

	</div>
<!-- STOP -->
</body>
</html>
jawbreakerMedlem sedan jan. 2003296 inlägg
#11

Alltså, i ditt exempel kommer ju .container-div:en att ha display: block eftersom du inte angivit något annat, så den kommer att vara lika bred som #content (minus den padding som är satt till vänster och höger då förstås). Och du har text-align: center på .container, vilket innebär att dina tre .smadivar kommer att centreras inuti .container. Så jag ser inte varför du skulle behöva ha text-align: center på body också...

SkivanMedlem sedan feb. 20108 inlägg
#12

Nu har jag nog snurrat till det. Jag menade om man INTE har "display: inline-block;" på smådivarna. Jag ser att jag har det i min exempelkod, så det blev ju helt fel.

Om jag har ovanstående kod, men UTAN inline-block på smådivarna, och MED float: left; så fungerar det ju inte.

Jag får bara till det genom att minska containers bredd till de tre smådivarnas, och sätta body eller content till centrerat - ELLER - sätta en div utanpå container och centrear container i den.

Jag ber om ursäkt att jag missade i koden och att jag har svårt att förklara vad jag menar :/

Du skrev något i ditt första svar, om att centrera utan inline-block, om man hade fast bredd på sakerna. "Om det går att sätta en fast storlek på dem (och då även container-div:en) är det enkelt att centrera container-diven på samma sätt som sidan i sig centreras."

Det är när jag gör så, som jag får vänsterjustera allt annat, ELLER centrera container inuti en annan div.

Och INTE har inline-block någonstans då.

Hoppas att jag lyckas förklara hur jag menar trots att jag förklarar så klumpigt.

jawbreakerMedlem sedan jan. 2003296 inlägg
#13

Aha, då förstår jag kanske igen :)

Det jag menade var egentligen att det är enkelt att centrera .container om du har en fast bredd på den... Typ:

.container { margin: 0 auto; overflow: hidden; width: 300px; }
.smadivar { float: left; width: 100px; }

Men .smadivar kommer i sig inte att vara centrerade egentligen - det är bara .container som blir centrerad, sen får du se till att bredderna på .smadivar tillsammans blir lika breda som .container för att det ska se centrerat och bra ut... Mer avancerat än så var det inte. Och i så fall behöver du inte ha text-align: center någonstans längre.

SkivanMedlem sedan feb. 20108 inlägg
#14

Aha, nu förstår jag!

Jag kände inte till värdet autos användbarhet fullt ut. Jag har trott att margin: auto; bara fungerar ihop med text-align: center; och jag har bara använt det ihop med text-align: center; när "stor-containern" i body inte vill centreras i FF och dito med tabeller.

Tack för ditt tålamod, idag lärde jag mig en hel del som jag borde ha vetat innan.

131 ms totalt · 3 externa anrop · v20260731065814-full.fb544a5a
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
128 ms — hämta tråd, inlägg och bilagor (db)