Reputation: 97
So currently I'm working on a portfolio and I can't use Bootstrap because it's not compatible with the website (it screws everything up, I could just make some tweaks but that's not the point) so I'm trying to make 3 divs on the same line without using float: left;
how should I do this without bootstrap or tables?
<div id="Portfolio">
<div class="portfolioWrapper">
<a class="portfolioLink" href="#">
<div class="portfolioProject">
<h4>Sample Project</h4>
</div>
</a>
<a class="portfolioLink" href="#">
<div class="portfolioProject">
<h4>Sample Project</h4>
</div>
</a>
<a class="portfolioLink" href="#">
<div class="portfolioProject">
<h4>Sample Project</h4>
</div>
</a>
</div>
</div>
Upvotes: 1
Views: 200
Reputation: 369
Well, first you need to move your anchors inside the div
containers:
<div class="portfolioProject">
<a class="portfolioLink" href="#"><h4>Sample Project</h4></a>
</div>
You can use CSS selectors to set display: inline-block
on the child anchors to get them to display next to each other, like so:
div > a { display: inline-block;}
Edit: @GCyrillus pointed out that you don't need to put the anchors back inside the divs if the document type is HTML5. You can fix this with the following CSS:
div > a {
display: inline-block;
}
Upvotes: 0
Reputation: 44
You can try setting .portfolioWrapper to position relative and then set all .portfolioLink to display: inline-block and set a width of 33% depending on the length of your outer container. You shouldn't need to use a float if you use inline-block.
.portfolioWrapper {
position: relative;
}
.portfolioLink {
display:inline-block;
width: 33%;
}
Upvotes: 0
Reputation: 1003
Setting the display property to flex will allow the items to sit in one line as long as the are not too wide.
.portfolioWrapper {
display:flex;
justify-content: space-around;
}
<div id="Portfolio">
<div class="portfolioWrapper">
<a class="portfolioLink" href="#">
<div class="portfolioProject">
<h4>Sample Project</h4>
</div>
</a>
<a class="portfolioLink" href="#">
<div class="portfolioProject">
<h4>Sample Project</h4>
</div>
</a>
<a class="portfolioLink" href="#">
<div class="portfolioProject">
<h4>Sample Project</h4>
</div>
</a>
</div>
</div>
Upvotes: 2