Tło w div z textarea

Question

Jeżeli ktoś zna odpowiedź to będę wdzięczny.

Mam div, w którym znajduje się <textarea> a pod nią <div> stanowiący docelowo button Post.

HTML

			<div class="profileposts">	
			
				<div class="postarea">

					<textarea placeholder="What's on your mind"></textarea>
					<div class="post-button">Post</div>	
		
				</div>			
			</div>	

Zależ mi na tym, aby zarówno <textarea> jak i post-button - czyli wszystko co znajduje się w <div> o klasie "postarea" było na tle białym. Niestety pomimo ustawienia białego tła dla "postarea", nie objemuje ono diva o klasie post-button. 

Czy zna może ktoś przyczynę?

CSS

.profileposts
{
	 min-height:400px;
	 flex:2.5;
	 box-sizing:border-box;
	 margin-bottom:20px; 
	 background-color:blue;
}

.profileposts textarea
{
	width:100%;
	box-sizing:border-box;
	height:200px;
	border:none;
	padding: 20px;
	font-family:Arial;
	outline:none;
	resize:none; 
}

.postarea
{
	background-color:white;
}

.post-button
{
	float:right;
	background-color:#3c5a99;
	padding:4px;
	border-radius:3px;
	color:white;
	margin-right:10px;
}

 

Answer 1

Staraj się używać np. <button> zamiast z div-a robić button-a.

Proponuje użyć: flex-a.

  ...

  <div class="postarea">

    <textarea placeholder="What's on your mind"></textarea>
    <div class="post-button">
      <button>Post</button>        
    </div> 

  </div>

  ...

...

.post-button
{
  display: flex;
  justify-content: flex-end; 
}
.post-button button
{
  background-color: #3c5a99;
  padding: 0.35em;
  border: 0;
  border-radius: 0.2em;
  color: white;
  margin-right: 1em;
}

...

 

P.S.

[ <a> vs <button> vs <div> vs <input type='button"> ]

 

[ on-line ]

<button class="post-button" data-title="<button>">Post</button>

<a href="#" class="post-button" data-title="<a>">Post</a>

<div class="post-button" data-title="<div>">Post</div>

<input type="button" class="post-button" value="Post">
<span data-title="<input>"></span>


<style>
  .post-button
  {
    background-color: #3c5a99;
    padding: 0.35em;
    border: 0;
    border-radius: 0.2em;
    color: white;
    text-decoration: none;
    font: 400 1em system-ui;
    user-select: none;
    box-shadow: 4px 4px 6px black;
    transition: all 250ms;
  }
  .post-button:active
  {
    box-shadow: none;  
  }

  /* dla demonstracji */
  .post-button,
  span
  {
    position: relative;
    margin-right: 5em;
  }
  .post-button:hover::after,
  .post-button:hover + span::after
  {
    position: absolute;
    top: 0.25em;
    left: 3em;
    content: attr(data-title);
    font: 700 0.9em system-ui;
    padding: 0.2em;
    color: limegreen;
    background-color: black;
  }
  .post-button:hover + span::after
  {
    top: -0.26em;
    left: -5.4em;
  }
  div.post-button
  { 
    display: inline-block;
  }  
</style>

 

Comments

Dogłębnie wyjaśnione! Dzięki!

Answer 2

.profileposts
{
     min-height:400px;
      ...
}

Ten zapis powoduje, że kontener jest wyższy niż zawartość i to co "wystaje pod" to jest to niebieskie tło.

.post-button
{
    float:right;
    ...
}

float "wyjmuje" zawartość z pojemnika, więc button nie jest już w postarea. 

Comments

Ok czyli float w tym przypadku jest złym rozwiązaniem… :(

---

Nie do tego został stworzony. Musiałbyś dać go do osobnego pojemnika o określonej wysokości.

Lepiej użyć bardziej oczywistych właściwości. Flexbox jest aktualnie takim podejściem.

---

Tak zrobię, dzieki