CODEWITHSUNDEEP
htmlcsstagscss-float
JohnSnow
JohnSnow

Reputation: 173

move div tag to the right through CSS

I have 3 div tag that I aligned on the left and are floating left. The problem is above there is another content of width: 80rem; and I would like to kind of centre them. I tried so many combinations, but I am unable to let start the 1st picture aligned to the object above.

CSS

.beachcontent{
background-color: #FAFCE8;
margin: auto;
margin-bottom: 5px;
border: 0.1rem solid black;
padding: 0.2rem;
width: 26.6rem;
text-align: center;
margin-left: 2.5px;
margin-right: 2.5px;
float: left;
}

HTML

<div class="beachcontent">  <!--starting div beachcontent-->
<h4>Sardinia</h4>
<a href="sardinia.html"><img src="images/sardinia.jpg" width="330" height="220" alt="Sardinia"></a>
</div>                      <!--ending div beachcontent-->
<div class="beachcontent">  <!--starting div beachcontent-->
<h4>Sicily</h4>
<a href="sicily.html"><img src="images/sicily.jpg" width="330" height="220" alt="Sicily"></a>
</div>                      <!--ending div beachcontent-->
<div class="beachcontent">  <!--starting div beachcontent-->
<h4>Elba</h4>
<a href="elba.html"><img src="images/elba.jpg" width="330" height="220" alt="Elba"></a>
</div>                      <!--ending div beachcontent-->
</main>
<!--several br lines to display hr below beachcontent divs-->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!--TO BE FIXED IF POSSIBLE-->

another small issue is that I have to use several <br> lines to display <hr> below beachcontent divs, which is not really elegant. Is there a better way to fix this? Thanks in advance.

enter image description here

Upvotes: 0

Views: 1202

Answers (1)

Enejdi Drini
Enejdi Drini

Reputation: 26

I think i found a solution for your problem. I grouped all your div's inside another div and put it a width of 82rem and a auto margin. You have to customize the width to fit your design. Try the code below:

.beachcontent{
background-color: #FAFCE8;
margin-bottom: 5px;
border: 0.1rem solid black;
padding: 0.2rem;
width: 26.6rem;
text-align: center;
display:inline-block;
}
#middle{
  width: 82rem;
  margin:auto;
}
<div id="middle">
<div class="beachcontent">  <!--starting div beachcontent-->
<h4>Sardinia</h4>
<a href="sardinia.html"><img src="images/sardinia.jpg" width="330" height="220" alt="Sardinia"></a>
</div>                      <!--ending div beachcontent-->
<div class="beachcontent">  <!--starting div beachcontent-->
<h4>Sicily</h4>
<a href="sicily.html"><img src="images/sicily.jpg" width="330" height="220" alt="Sicily"></a>
</div>                      <!--ending div beachcontent-->
<div class="beachcontent">  <!--starting div beachcontent-->
<h4>Elba</h4>
<a href="elba.html"><img src="images/elba.jpg" width="330" height="220" alt="Elba"></a>
</div><!--ending div beachcontent-->
</div>
</main>
<!--several br lines to display hr below beachcontent divs-->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!--TO BE FIXED IF POSSIBLE-->

Can you please clarify the problem with your break line tag? Hope this helps

Upvotes: 1

Related Questions