How to fix position of CSS elements? - php

Question

I would like to create a website with a tile layout, similar to the new Windows style. https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/jquery4u/2013/03/metro-template.png <- kind of like this, except that in my case:
each tile is the same size (square) (.box)
The text should be in the centered in the tile (.center-box-content)
each tile should entail two buttons in its lower right corner, in addition to the text (.lower-right-box-content)
The buttons are edit and trash icons, so that the text in the tiles can be changed.
I have accomplished this, but the problem is: The buttons seem to be dependent on the text length.
I've assigned them an absolute position in the css file, yet they don't stay put.
If the text in the tile is longer, they move all the way past/beyond the tile's borders, which they shouldn't surpass. It's a complete mess. I have tried everything but I can not find a solution. I am hoping that you guys can take a look and maybe see what I am missing? Here's my CSS Code:
.box {
width: 200px;
height: 200px;
margin: 2px;
color: whitesmoke;
float: left;
padding: 7px;
}
.center-box-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.lower-right-box-content {
position: absolute;
float: right;
padding: 2px;
bottom: -60px;
right: -5px;
}
.red-box {
background-color: indianred;
}
.blue-box {
background-color: deepskyblue;
}
.green-box {
background-color: mediumseagreen;
}
Here is my HTML Code: (The PHP bit just reads out the text from the data base, which is an event name, event description, and event date)
<!--the entire square tile -->
<div class="box red-box" height="100%" width="100%">
<!--this centers the text within the tile -->
<div class="center-box-content">
<!--echo the name -->
<b><?php echo $row["title"]; ?></b>
<!--echo the description -->
<?php echo $row["description"]; ?>
<br> • <!--echo the date -->
<?php echo $row["date"]; ?> •
<!--edit and delete button in the lower right corner of the tile -->
<!--this is the part that keeps moving as the text gets longer -->
<div class="lower-right-box-content">
Upcoming Events <span style="display:inline-block; width: 20px;"></span>
<a href="#">
<span class="glyphicon glyphicon-pencil glyphicon-pencil" role="button"> </span>
</a>
<a href="deleteevent.php?id=<?php echo $row["eventid"];?>">
<span class="glyphicon glyphicon-trash glyphicon-trash" role="button"></span>
</span>
</a>
</div>
</div>
</div>
<?php };
?>

Answer 1

For ideal management of "box" today we use the grid. One example css for 6-columns grid:
body {
font-family: 'Ariel', sans-serif;
font-weight: 100;
font-size: 1em;
color: #faf3bc;
background-color: #0976B2;
}
.grid_1 { width: 15.625%; } /* 125px/800px = 15.625% */
.grid_2 { width: 32.5%; } /* 260px/800px = 32.5% */
.grid_3 { width: 49.375%; } /* 395px/800px = 49.375% */
.grid_4 { width: 65.625%; } /* 525px/800px = 65.625% */
.grid_5 { width: 83.125%; } /* 665px/800px = 83.125% */
.grid_6 { width: 100%; } /* 800px/800px = 100% */
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6 {
/* margin-right: 1.25%; */
float: left;
display: block;
}
.last {margin-right:0; }
.container{
clear:both;
width: 90%;
max-width: 800px;
padding: 0% 0;
margin: auto;
}
img {
max-width: 100%;
}
h1 {
color: #ffffff;
}
a:link {color:#b4c34f; text-decoration:none;} /* unvisited link */
a:visited {color:#b4c34f; text-decoration:none;} /* visited link */
a:hover {color:#faf3bc; text-decoration:underline;} /* mouse over link */
a:active {color:#b4c34f; text-decoration:none;} /* selected link */
a.selected {color:#ffffff;} /* selected link */
ul {
list-style-type:none;
}
.form-input {
height: 30px;
}
#media screen and (max-width : 705px) {
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6 {
width: 100%;
}}
HTML for 3 "box" in raw:
<div class='grid_2'>
</div>
<div class='grid_2'>
</div>
<div class='grid_2 last'>
</div>
HTML for 2 "box" in raw:
<div class='grid_3'>
</div>
<div class='grid_3 last'>
</div>
Maybe you need more grid-columns, go ahead, learn responsive web design.

Answer 2

Is the square the direct parent of those absolutely positioned elements? It should be, and it needs to have position: relative for the absolute position to work.
And erase the float from those elements - it doesn't make sense for absolutely positioned elements.

Answer 3

Here is the jsfiddle link
You need to set the .lower-right-box-content to position:relative and then make the buttons absolute positioned.
<div class="lower-right-box-content">
<div style="display:inline-block;margin-right:40px;text-align:justify;"> Upcoming Events longggg text does not matter </div>
<a href="#">
<span class="glyphicon glyphicon-pencil glyphicon-pencil" role="button" style='position:absolute;bottom:10px;right:5px;'> </span>
</a>
<a href="deleteevent.php?id=<?php echo $row["eventid"];?>">
<span class="glyphicon glyphicon-trash glyphicon-trash" role="button" style="position:absolute;bottom:10px;right:20px;">
</span>
</a
</div>
</div>
I have used inline styles for clarity. Please update the styles in stylesheet with appropriate selectors.

Answer 4

Place the buttons in their own div.
Add position: relative to the box.
Use position: absolute to place the text and buttons to the bottom.
To ensure longer text does not overlap with the buttons, add some padding to the text.
.box {
width: 200px;
height: 200px;
margin: 2px;
color: whitesmoke;
float: left;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
}
.center-box-content {
text-align: center;
}
.upcoming {
position: absolute;
bottom: 0;
text-align: center;
left: 0;
right: 0;
padding: 0 30px; /* ensure the text clears the buttons */
}
.buttons {
position: absolute;
bottom: 0;
right: 0;
}
.red-box {
background-color: indianred;
}
.blue-box {
background-color: deepskyblue;
}
.green-box {
background-color: mediumseagreen;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="box red-box">
<div class="center-box-content">
<b>Name</b>
<br>Description
<br> • Date •
</div>
<div class="lower-right-box-content">
<span class="upcoming">Upcoming events</span>
<div class="buttons">
<a href="#">
<span class="glyphicon glyphicon-pencil glyphicon-pencil" role="button"></span>
</a>
<a href="#">
<span class="glyphicon glyphicon-trash glyphicon-trash" role="button"></span>
</a>
</div>
</div>
</div>
<div class="box red-box">
<div class="center-box-content">
<b>Name</b>
<br>Description
<br> • Date •
</div>
<div class="lower-right-box-content">
<span class="upcoming">Upcoming events events events</span>
<div class="buttons">
<a href="#">
<span class="glyphicon glyphicon-pencil glyphicon-pencil" role="button"></span>
</a>
<a href="#">
<span class="glyphicon glyphicon-trash glyphicon-trash" role="button"></span>
</a>
</div>
</div>
</div>