Probleme Afisare Continut Div-Uri Pe Aceeasi Linie

[CaTa CaTa]

Salut am facut si eu un index dar am o problema nu imi arata content la linie cu tops am facut asa

Poza -> 

 

HTML -> 

<div class="tops">
		   <b><center><font color="white">Update</font></center></b>
</div>
<br>
		<div class="content">
		   <b><center><font color="white">Update</font></center></b>
		</div>
</br>

CSS -> 

.content { 
	background: url("../images/info_box.png") transparent;
	display: inline-block;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	margin: 10px;
	padding: 10px;
	clear: both;
	width: 800px;
	height: autopx;
	float: left;
}
.tops { 
	background: url("../images/info_box.png") transparent;
	/*border-radius: 10px;
	float: left;
	margin-top: 15px;
	min-height: autopx;
	padding: 10px;
	width: 300px;*/
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	width: 285px;
	float: right;
	margin: 10px;
	padding: 10px;
	clear: both;
}

help?

[gadeas]

Nu iti arata pe aceasi rand pentru ca stergi floatu cu clear la aceasi clasa, trebuie sters la un element de mai sus.

 

Va trebuie sa adaugi tot acel continut in alt div, un exemplu si ceva ce eu cred personal ca e mai bine gandit ar fi urmator-ul:

<div class="main">
     <div class="content">
          <h1>Content</h1>
     </div>

     <div class="sidebar">
          <h1>Sidebar</h1>
     </div>
</div>

Si CSS-ul:

        .main {
            overflow: hidden;
        }
        .content {
            width: 68%;
            float: left;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            background-color: #000;
            box-sizing: border-box;
            margin-right: 2%;
            padding: 10px;
        }
        .sidebar {
            width: 30%;
            float: right;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            background-color: #000;
            box-sizing: border-box;
            padding: 10px;
        }

Dupa cum observi, am evitat "clear" la clasa main, poti schimba overflow-ul cu clear: both; daca chiar vrei, dar diferenta nu va fi, lumea incepe sa lucreze cat mai mult cu overflow.

 

Box-sizingu: border-box; este pentru a evita ca paddingu sa se extinda in exterior, adica sa nu mareasca continutu, ci sa reduca din inaltime si latime si sa adauge paddingu pentru a nu depasi width-ul de 68%.

Pentru a da un spatiu in lateral am folosit margin-right: 2%; si cum bine observi am redus de la 70% latime la 68% pentru a evita sa sara pe urmator-ul rand. Daca vrei sa faci asta in pixeli, va trebui sa lucrezi cu tot site-ul in pixeli, in cazu meu, asta este body-ul:

        body {
            width: 80%;
            max-width: 960px;
            margin: 0 auto;
        }

Nu imi prea place sa lucrez cu pixeli, pentru un design responsiv nu e ce-a mai buna metoda sa te pui si sa calculezi pixeli pentru fiecare rezolutie.

 

 

Sperca am rezolvat problema care vroiai sa afli.

[CaTa CaTa]

Multumesc.