Wooster Wooster - 3 months ago 7
CSS Question

Target button element to be static when resizing window in CSS?

I have a navbar with a few elements inside it and a button that escapes the navbar when i resize it. What CSS property should I style to keep the button in CSS to stop the button from escaping the navbar?

Attached is a JFiddle of an example of what happens:

https://jsfiddle.net/6Lx0hkfa/



.green-button {
font-size: 13px;
display: inline-block;
height: 50px;
width: 170px;
float: left;
margin-left: 235px;
padding: 6px 10px;
background-color: rgb(185, 233, 137);
color: rgb(43, 150, 190);
text-transform: uppercase;
border-radius: 0px;
border-width: 0px;
border-style: initial;
border-color: initial;
box-sizing: border-box;
}

<section id="header">
<div class="wrapper">
<div class="address">7542 Fay Ave Upstairs Suite, La Jolla, CA 92037</div>
<div class="phone">(858) 381-0740</div>
<div class="email">sdacneclinic@gmail.com</div>
<div class="social">
<a class="social-btn fb" href="http://facebook.com"></a>
</div>
<div class="social">
<a class="social-btn tw" href="http://twitter.com"></a>
</div>
<div class="social">
<a class="social-btn ig" href="http://instagram.com"></a>
</div>
<div class="social">
<a class="social-btn gp" href="https://plus.google.com"></a>
</div>
<a href="/contacts">
<button class="green-button">Book Consultation</button>
</a>
</div>
</section>




Answer

I don't know what you are trying to achieve, but this one worked for me:

.green-button {
  position: absolute;
}
Comments