Witaj mam problem z divami i ukladem

Question

<div id="info">
      <div class="bip">
      
      </div>
    <div class="sidebar">
    <center>
   <h3>Media społecznościowe</h3>
    <a href="#" class="fa fa-facebook"></a>
    <a href="#" class="fa fa-youtube"></a>
     <a href="#" class="fa fa-instagram"></a> 
    </center>
 </div>
      <div class="uonet">
      <img src="edziennik2.jpg" width="15%">
      </div>
    </div>

.bip{
    width: 15%;
    height: 270px;
    background-color: white;
}
#info{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.sidebar {
padding: 20px;
width: 15%;
height: 150px;
background-color: white;
color: black;
font-family: Tahoma;
text-align: right;
font-weight: bolder;
float: left;
}

Mi takie cos wychodzi a ja chce zeby bylo tak jak obrysowalem na zdjeciu czerwoną linią. POMOCY !!!!

Comments

Czytelność kodu, który podesłałeś nie ułatwia pracy

---

przecież jest czytelnie :P

Answer 1

Jeśli chcesz powiększyć te elementy to czemu im po prostu nie nadasz większej szerokości?

Answer 2

Dobrze jest dodać taki zapis, aby margin i padding był brany jako pełny rozmiar kontenera.

* {
  box-sizing: border-box;
}

[ css box-sizing ]

nadając "głównemu" kontenerowi pewną wartość

.info {

  . . .

  max-width: 360px; 

}

wtedy np.: sidebar: width100% + margin + padding = 360px  

wewnętrzne elementy dopasujesz wtedy

.sidebar {
  width: 100%;
  height: 150px;

  . . .

}

Moja propozycja  

<div class="info">
  <div class="bip">
  </div>

  <div class="sidebar">
    <h3>Media społecznościowe</h3>
    <a href="#" class="fa fa-facebook"></a>
    <a href="#" class="fa fa-youtube"></a>
    <a href="#" class="fa fa-instagram"></a> 
  </div>

  <div class="uonet">
    <img src="edziennik2.jpg" width="15%">
  </div>
</div>

* {
  box-sizing: border-box;
}
.info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  text-align: center;
  gap: 2rem 0;
  max-width: 360px;  
  margin: 0 auto;
  
  border: 1px solid red; /* do demonstarcji wielkości głównego kontenera */
} 
.bip {
  width: 100%;
  height: 270px;
  background-color: red;
}
.sidebar {
  width: 100%;
  height: 150px;
  padding: 20px;

  background-color: black;
  color: black;
  font-family: Tahoma;
  font-weight: bolder;
  background-color: blue;
}
.uonet {
  width: 100%;
  height: 270px;
  background-color: green;
}

Answer 3

Popracuj nad czystością kodu.

Nie dokonywałem gruntownych zmian w kodzie, które są (konieczne według mojej opinii), moja propozycja opiera się na kodzie który Nam dostarczyłeś  . 

Moja propozycja :

<div id="info">
      <div class="bip">
       
      </div>
    <div class="sidebar">
    <center>
   <h3>Media społecznościowe</h3>
    <a href="#" class="fa fa-facebook"></a>
    <a href="#" class="fa fa-youtube"></a>
     <a href="#" class="fa fa-instagram"></a> 
    </center>
 </div>
      <div class="uonet">
      <img src="edziennik2.jpg" width="15%">
      </div>
    </div>

#info{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
gap:30px;
}

.bip{
    width: 15%;
    height: 270px;
    background-color: red;
}
.sidebar {
padding: 20px;
width: 15%;
height: 150px;
background-color: white;
color: black;
font-family: Tahoma;
text-align: right;
font-weight: bolder;
background-color: blue;
}
.uonet {
  width: 15%;
    height: 270px;
    background-color: green;
}

Pozdrawiam i życzę Powodzenia .

Answer 4

zamień w #info wartość właściwości align-items z center na stretch, bo równasz wszystko do środka i dlatego szerokości są różne

jak chcesz margines we flexboxie to użyj właściwości gap, np gap: 3rem 0; (co da margines od góry i dołu na 3rem)

nie ustawiaj width: 15%; na żadnym z elementów, bo wtedy nie będzie responsywnie, jak nie chcesz żeby był na całości szerokości to ustaw max-width: 360px lub jakąś małą stałą szerokość :P

#info{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  align-content: center;
  gap: 3rem 0;
  max-width: 360px;
  margin: 0 auto;
}

 a w wolnej chwili przejdź sobie kurs flexboxa :P

 

Z innych błędów to znacznik <center> jest przestarzały i nie należy go używać,

Do oznaczania elementów html używamy class zamiast id, czyli zamień wszystkie id na klasy :P

id używamy jeśli chcemy zrobić odwołanie w innym elemencie, np

<label for="nazwa">text</label> <input id="nazwa" />