CODEWITHSUNDEEP
htmlcss
Morrismario
Morrismario

Reputation: 17

text at the bottom of a div

My text automatically goes to the bottom of the div, like shown in the bellow picture.

enter image description here

I want to make a list at the top of the div, under the title so that it looks clean. Here is the code

.main {
    margin-left: 160px; 
    font-size: 28px; 
    padding: 0px 10px;
    overflow: scroll;
  }
  

.main ul{
  margin-left: 15px;
  display: block;
  margin: 2px 0 0 0;
  float: left;
}
#bloc1, #bloc2{
  display:inline-block;
}

#bloc2 img{
 max-width: 700px;
 margin-top: 50px;
 margin-left: 100px;
 
}
.main h1{
  color: rgb(95, 95, 95);
  
}
<div class="main" id="section1">
        <h1>Muhammad Ali</h1>
        <div id="bloc1">
        
        <ul>
            <li>intro</li>
            <li>wat info</li>
            <li>contact</li>
          </ul>
       </div>
       <div id="bloc2">
       <img src="fotos/muhammad ali.jpg">
       </div>
       
      </div>

Upvotes: 0

Views: 54

Answers (2)

Mihai T
Mihai T

Reputation: 17687

Well if you want that why do you use inline-block on the block div elements ? Like the name states, they will go ' inline '. So remove that style.

Also remove float:left . Never use float left for layout purposes. Float left is used in other scenarios.

EDIT: After your comment I think I understood what you actually wanted. Make use of flexbox for this. Take a look below.

.main {
   margin-left: 160px;
   font-size: 28px;
   padding: 0px 10px;
   overflow: scroll;
   display: flex;
   flex-direction: row;
   flex-wrap:wrap;
 }
 
 .main h1 {
  flex: 0 0 100%;
  }


 .main ul {
   margin-left: 15px;
   display: block;
   margin: 2px 0 0 0;

 }


 #bloc2 img {
   max-width: 700px;
   margin-top: 50px;
   margin-left: 100px;

 }

 .main h1 {
   color: rgb(95, 95, 95);

 }
<div class="main" id="section1">
  <h1>Muhammad Ali</h1>
  <div id="bloc1">

    <ul>
      <li>intro</li>
      <li>wat info</li>
      <li>contact</li>
    </ul>
  </div>
  <div id="bloc2">
<img src="https://via.placeholder.com/150">
  </div>

</div>

Upvotes: 2

Jelle Bruisten
Jelle Bruisten

Reputation: 441

Have you tried using display: flex on #main like this:

 .main {
    margin-left: 160px; 
    font-size: 28px; 
    padding: 0px 10px;
    overflow: scroll;
    display:flex;
    flex-direction: column;
    align-items: center;
  }

Upvotes: 0

Related Questions