CODEWITHSUNDEEP
htmlcss
Will
Will

Reputation: 165

How to use position items in div 90% (or so) of width apart responsively

How would you position elements in a relatively positioned div, and keep them the same distance apart without going out side of the box? I have a relatively positioned div and inside of it is a div(nameTabs) that spans 100% of the width. Inside of that div is taskstabtext, and tasksaddbox. Tasks tab text is positioned where it is and stays there. Button does not. What would be the cleanest way of positioning the two in a flexbox responsive div? Thanks

<html>
<body>

<div id="box" style="display inline:block; position:relative; left:10%; background-color:red;">
<div>
<div class="nameTabs tasksTab">
                            <div class="tasksTabText">
                                <p class="tasksBtnText">Name</p>
                            </div>
                            <div class="tasksAddBox">
                                <p class="tasksAddBtn">Last</p>
                            </div>
                        </div>
</div>
</div>
</body>
</html>

LINK - https://jsfiddle.net/9rqd9ot9/15/

Upvotes: 1

Views: 46

Answers (1)

Will
Will

Reputation: 165

I figured it out. For anyone with a similar issue, just use the justify-content:space-between;rule. It seperates the two and then you can set their margins from the edge.

LINK- https://jsfiddle.net/9rqd9ot9/38/

Upvotes: 1

Related Questions