CODEWITHSUNDEEP
htmlcss
Kenneth Rhodes
Kenneth Rhodes

Reputation: 97

Float: left; Alternative for making divs in one line?

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

Answers (3)

Froopy
Froopy

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;
 }

Updated JSFiddle example

Upvotes: 0

matthummel
matthummel

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

bob
bob

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

Related Questions