Hey everyone, I'm currently working on a project where each child div needs to have the full width of the container and display inline, similar to an inline navigation menu. While I've been able to achieve this effect, my current method is not very efficient as I had to use an empty space HTML character to make it work.
The code I used for this setup looks like this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.parent > div{
display: inline;
}
/* Display all child divs inline */
.parent{
width:20%;
position: relative;
overflow:hidden;
border:solid;
}
/* The parent container will be part of a dynamic jQuery carousel so the width is set as a percentage
*/
/*width does not apply to inline elements*/
.children{
position: absolute;
width: 100%;
}
/* Shared attributes for all child divs of the parent container */
.child-1{
background-color: #8A2BE2;
}
/* Styling for first child div */
.child-2{
left:100%;
background-color: #FF7F50;
}
/* Styling for second child div */
</style>
</head>
<body>
<div class="main-parent">
<div class="parent">
<div class="children child-1">
First child
</div>
<div class="children child-2">
Second child
</div>
</div>
</div>
</body>
</html>