Skocz do zawartości

[CSS] 3 DIV'y w kontenerze, wyrównanie.


marcinkacper

Recommended Posts

Witam, otóż próbuje bezskutecznie wyrównać 3 divy tak aby pierwszy był przy lewej krawędzi drugi wyśrodkowany a trzeci przy prawej krawędzi. Już wypróbowałem tyle sposobów że trudno było by je zliczyć. Poniżej aktualny stan mojej męczarni.

<form id="kontakt" action="functions/form2mail.php" onsubmit="return validateForm()" method="POST">
<div id="kontener">
<div class="kolumna"><img src="images/ikona_imie.jpg" class="ikona"><input name="imie" id="imie" type="text" placeholder="imię / nazwisko / nazwa"></div>
<div class="kolumna"><img src="images/ikona_telefon.jpg" class="ikona"><input name="telefon" id="telefon" type="text" placeholder="telefon kontaktowy" onkeyup="this.value=this.value.replace(/\D/g,'')"></div>
<div class="kolumna"><img src="images/ikona_mail.jpg" class="ikona"><input name="mail" id="mail" type="text" placeholder="adres e-mail"></div>
</div>
<div id="textbox"><textarea id="text" class="text" name="text" placeholder="treść wiadomości"></textarea></div>
<div><input id="wyslij" type="submit" value="Wyślij"></div>
</form>

div#kolumny {
width:920px;
height:26px;
}

div#kontener .kolumna {
	width: 306px;
	height: 26px;
	display:inline-block;
}

#kontener .tytul {
	font-family:tahoma;
	font-size:18px;
	color:#454746;
	text-align:left;
	text-transform:uppercase;
}
#kontener .tekst {
	font-family:tahoma;
	font-size:13px;
	color:#555555;
	text-align:justify;
	padding-left:0px;
}

#kontener .more {
	text-align: right;
	padding-right: 15px;
}
#kontakt
{
	width: 920px;
	padding: 0px;
	overflow: hidden; /* Clear floats */
}
#textbox
{
	width: 920px;
	padding-top:10px;
	overflow: hidden; /* Clear floats */
}

#kontener .ikona {
	border:1px #cfcfcf outset;
}
#imie, #mail, #telefon
{
	height: 24px;
	width: 232px;
	padding-left:5px;
	font: normal 12px 'trebuchet MS', arial, helvetica;
	background: #ffffff;
	border:1px #cfcfcf outset;
}
#text
{
	height: 115px;
	width: 910px;
	padding-left:5px;
	font: normal 12px 'trebuchet MS', arial, helvetica;
	background: #ffffff;
	border:1px #cfcfcf outset;
}

#wyslij
{		
	height: 21px;
	width: 50px;
	cursor: pointer;
	margin:15px 15px;
	border:0;
	float:right;
}

Próbowałem divy kolumna podzielić na 3 różne i w pierwszym dać position: relative, float:left w drugim samo position:relative a w trzecim float:right i position:relative, to jest jedna opcji przez którą przebrnąłem. najlepszy efekt otrzymałem zamieniając miejscami w kodzie 2 diva z 3 i wtedy wyświetliło w jednej linii wszystko i na miejscach w których chciałem, z tym że przełączając między formatkami tabulatorem przeskakiwał z lewego na prawy i dopiero na środkowy. Mam nadzieje że ktoś zrozumie moje wytłumaczenia.

wyglada teraz tak: http://komputreks.com.pl/

a ma wygladac tak: http://mkacper.pl/komputreks.jpg

  • Upvote 8
Link do komentarza
Udostępnij na innych stronach

  • 1 month later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Gość
Odpowiedz...

×   Wkleiłeś treść z formatowaniem.   Usuń formatowanie

  Only 75 emoji are allowed.

×   Twój link będzie automatycznie osadzony.   Wyświetlać jako link

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Wczytywanie...
×
×
  • Utwórz nowe...