css - Keep div's from pushing each other -
the picture layout want when hover, gets messed up. div's start shifting around , moving horizontally when next div italicizes. how can maintain exact layout 100% of time?
.project-link { font-family: 'utopiastd'; color:#010202; font-size:5.6vw; white-space:nowrap; text-decoration:none; margin-right: 3%; line-height:125%; border-bottom: solid transparent 2px; }
solution 1:
you had right idea trying white-space:nowrap
. keep first 2 links , keep them on 1 line, wrap them in parent element , apply white-space:nowrap
parent element. if have on both anchor elements , parent elements, won't break lines in middle of link or between them.
<div class="line"> <a class="project-link" id="one" href="#modal1">maru speaker design <span> (1) </span> </a> <a class="project-link" id="two" href="#modal2">lights — out <span> (2) </span></a> </div>
css
.line{ white-space: nowrap; }
new fiddle: https://jsfiddle.net/zjkouzbo/2/
solution 2:
place non-breaking space between anchor elements want keep on same line using html entity
. make sure take out other spaces, including line breaks, between 2 elements. makes code little annoying read, doesn't suffer "div-itis" solution 1 does.
<a class="project-link" id="one" href="#modal1">maru speaker design <span> (1) </span> </a> <a class="project-link" id="two" href="#modal2">lights — out <span> (2) </span></a>
second fiddle: https://jsfiddle.net/zjkouzbo/3/
Comments
Post a Comment