Move div down

Question

Move div down

Navigation

#1 by (2 votes)

2

I have 4 divs on my page, next to each other, how can I make it so that the last div is left aligned on the bottom line?

MyCode:

     <!-- DIV 1 -->
     <div style="float: left; width: 100px; height: 50px; background-color: #CCCCCC; border-style: solid; border-size: 1; border-color: #FFFFFF;">1</div>

     <!-- DIV 2 -->
     <div style="float: left; width: 100px; height: 50px; background-color: #CCCCCC; border-style: solid; border-size: 1; border-color: #FFFFFF;">2</div>

     <!-- DIV 3 -->
     <div style="float: left; width: 100px; height: 100px; background-color: #CCCCCC; border-style: solid; border-size: 1; border-color: #FFFFFF;">3</div>

     <!-- DIV 4 -->
     <div style="float: left; width: 100px; height: 50px; background-color: #CCCCCC; border-style: solid; border-size: 1; clear: Left; border-color: #FFFFFF;">4</div>

     <!-- DIV 5 -->
     <div style="float: left; width: 100px; height: 50px; background-color: #CCCCCC; border-style: solid; border-size: 1; border-color: #FFFFFF;">5</div>

As it was after entering clear: left.

Problem2-Afterusing(clear:left).

Anotherproblemhascomeup,Ineedtofitthediv'saspertheimagebelow,IwanttodothisusingonlyCSSandwithoutusingthemargin-top,IneedtodothisusingsomepureCSSsolution.ThenumberswithintheDIV'srefertothesequenceinwhichtheDIV'saredisplayedbyPHPfromMySql.

Thank you

css

asked by anonymous 06.11.2016 / 21:21

1 answer

What is the best way to pass a context to a nested class? How to mount a lambda expression and pass it by parameter to a generic function?

score 2 · Accepted Answer

In css and html the elements relate, for this specific solution you can do as below, however you may need to adapt, without the entire code I can not go beyond ...

<div style="float: left; width: 100; height: 50px; background-color: #CCCCCC; border-style: solid; border-size: 1; border-color: #FFFFFF;">1</div>
 <div style="float: left; width: 100; height: 50px; background-color: #CCCCCC; border-style: solid; border-size: 1; border-color: #FFFFFF;">2</div>
 <div style="float: left;width: 100; height: 70px; background-color: #CCCCCC; border-style: solid; border-size: 1; border-color: #FFFFFF;">3</div>

  <!-- Fazer essa div abaixo se alinha a esquerda na linha de baixo -->     

 <div style="position:absolute; margin-top:55px; width: 100; height: 50px; background-color: #CCCCCC; border-style: solid; border-size: 1; border-color: #FFFFFF;">4</div>

Let's try another way:

div
{
    float:left;  
    height:50px;
    width:100px;
    border: 1px solid #000000;
}
#id4
{
    clear:left;
}
#id3
{
   height:102px;
   margin-top:-52px;
}

<div>1</div>
<div>2</div>
<div  id="id4">4</div>
<div>5</div>
<div id="id3">3</div>

Or another option where I set a width to content and thus use float:right , but it's how I say each case is a case:

#content
{
    width: 306px;
    height: auto;
}
div
{
    float:left;  
    height:50px;
    width:100px;
    border: 1px solid #000000;
}
#id3
{
    float:right;
    height:102px;
}

<div id="content">
    <div>1</div>
    <div>2</div>
    <div id="id3">3</div>
    <div>4</div>
    <div>5</div>
</div>