How can I keep a button element in place when resizing the window using CSS?

I'm currently experiencing an issue with my navbar where a button escapes from it when I resize the screen. Which CSS property should I modify to ensure that the button remains inside the navbar and doesn't escape?

Here is a JFiddle link demonstrating the problem:

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"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="42312623212c27212e2b2c2b2953249495">[email protected]</a></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>

css

Answer №1

Not sure what your goal is, but here's a solution that did the trick for me:

.green-button {
  position: absolute;
}

Answer №2

When faced with a situation like this, my go-to solution would be to utilize the float property for ease of implementation. It's important to note that this method involves placing the link element above the other contents of the wrapper in the markup, but it provides a straightforward and direct fix.

.green-button-link {
  float: left;
}
.green-button {
  font-size: 13px;
  display: inline-block;
  height: 50px;
  width: 170px;
  margin-right: 20px;
  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">
    <a class="green-button-link" href="/contacts">
      <button class="green-button">Book Consultation</button>
    </a>
    <div class="address">7542 Fay Ave Upstairs Suite, La Jolla, CA 92037</div>
    <div class="phone">(858) 381-0740</div>
    <div class="email"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83f0e7e2e0ede6e0efeaedeae0c3e4eee2eaefade0ecee">[email protected]</a></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>
  </div>
</section>

Answer №3

Verify the snippet to ensure it meets your requirements. I have included descriptions add for the additions made to your code.

* {
margin: 0;
padding: 0;
}

body {
background: url(img/hero_bg.jpg) repeat-y center center fixed;
background size: 100%;
}

#header {
background-color: #1d7cb6;
display: block;
/* position: relative; */
color: white;
width: 100%;
height: 50px;
}

.wrapper {
text-align: center;
margin: 0px auto;
font-family: 'Raleway';
background: white;
z-index: 500;
vertical-align: middle;/* add */
position: relative;/* add */
padding-right: 200px;
}

.address {
display: inline-block;
width: 240px;
float: left;
display: inline-block;
height: 100%;
font-size: 10px;
padding: 20px 18px;
}

.phone {
display: inline-block;
width: 100px;
float: left;
height: 100%;
font-size: 10px;
padding: 20px 18px;
}

.email {
width: 150px;
float: left;
display: inline-block;
height: 100%;
padding: 20px 18px;
font-size: 10px;
}

a.social-btn {
width: 20px;
height: 20px;
margin-top: 13px;
float: left;

}

a.social-btn.fb {
background: url("img/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7513141610171a1a1e35470d051b12">[email protected]</a>") 0% 0%/ 20px 20px no-repeat;
display: inline-block;
}

a.social-btn.tw {
background: url("img/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4a0a3bda0a0b1a694e6acfaa4bab3">[email protected]</a>") 0% 0% / 20px 20px no-repeat;
display: inline-block;
}

a.social-btn.ig {
background: url("img/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85ecebf6f1e4e2f7c5b7fdabfebe2">[email protected]</a>") 0% 0% / 20px 20px no-repeat;
}

a.social-btn.gp {
background: url("img/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9beb6b6beb5bc99eba1fba9b7be">[email protected]</a>") 0% 0% / 20px 20px no-repeat;
}

section {
width: 900px;
margin: 0 auto;
}

section#header .wrapper button.green-button {
text-decoration: none;
font-family: 'Raleway';
}

.green-button {
font-size: 13px;
display: inline-block;
height: 50px;
width: 170px;
/* float: left; */
right: 0;/* add */
position: absolute;/* add */
/* 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"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9baada8aaa7acaaa5a0a7a0aa89aea4a8a0a5e7aaa6a4">[email protected]</a></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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The phrase 'nodemon' is not identified as a valid cmdlet, function, script file, or executable program

Recently I started working with Node.js, but I encountered an error when trying to run a program. The error message says "the term nodemon is not recognized the name of cmdlet, function, script file or operable function". Can someone please assist me with ...

javascripthtmlcssnode.jssocket.io

Creating Flexible Divs with Gradient Background for Older Versions of Internet Explorer - IE8 and IE7

I'm attempting to achieve the following. https://i.stack.imgur.com/YYOZv.jpg The issue I am encountering is that the elements in row1 have a different gradient background compared to those in row2. Additionally, row1 is populated dynamically with c ...

csshtmlinternet-explorer-8internet-explorer-7

Tips for organizing a grid to achieve the desired layout

Overview I am working on organizing items within the MUI Grid. The grid consists of multiple dynamic rows and columns. Each row has a fixed first column, followed by a variable number of scrollable columns. The scrollable columns should be grouped togethe ...

cssreactjsgridviewlayoutmaterial-ui

The issue I am facing with this self-closing TITLE tag causing disruption to my webpage

I am encountering a problem with my basic webpage. <html> <head> <title/> </head> <body> <h1>hello</h1> </body> </html> When viewed in both Chrome and Firefox, the webpage ...

csshtml

Is the order in which properties are executed always the same in CSS rules?

Have you ever wondered about the way browsers handle CSS properties within the same rule? The topic of rules precedence has been discussed at length, but this specific question focuses on the execution order by the browsers. In my view, I have always assu ...

cssproperties

Dynamic Image Grid Created Using JavaScript Glitches

My dilemma involves using JQuery to create an HTML grid of images styled with Flex Boxes. The setup works perfectly on desktop, but when viewing it on mobile devices, the images begin to act strangely - jumping, overlapping, and even repeating themselves i ...

javascriptjqueryhtmlcss

I'm attempting to execute a piece of code that retrieves a status count from a dataframe, the output of which will be displayed above my pandas html table

#Here is an example of a dataframe: import pandas as pd import numpy as np data = [['001', 'Completed'], ['002', 'In Process'], ['003', 'Not Started'], ['004''Completed ...

pythonhtmlcsspandas

Is there a way to ensure uniform font display across all browsers?

Is there a way to ensure consistent font display across all browsers? I am facing an issue with font consistency on my webpage. While browsers like Internet Explorer Edge and 11, Chrome, and Firefox display the desired font correctly, Internet Explorer 8 ...

htmlcssinternet-explorerfonts

"Can you provide instructions on how to set the background to the selected button

How can I change the background color of a selected button in this menu? Here is the code for the menu: <ul id="menu"> <li class="current_page_item"><a class="button" id="showdiv1"><span>Homepage</span></a></ ...

javascriptjqueryhtmlcss

Having trouble getting the custom font to display correctly in xhtml2pdf for a Django project

I'm having trouble incorporating a custom font into my PDF generated from HTML. Although I successfully displayed the font in an HTML file, indicating that the font path is correct and it's being used properly, the .ttf font type doesn't re ...

htmlcssdjangofont-facexhtml2pdf

Issue with Firefox browser: Arrow keys do not function properly for input tags in Twitter Bootstrap drop down menu

Requirement I need to include a login form inside the dropdown menu with username and password fields. Everything is working fine, except for one issue: Issue When typing, I am unable to use the arrow keys (up/down) in Firefox. This functionality works ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Having a CSS position fixed within a div container with the same width as its parent container

At the moment, I have three sections: left, center, and right. I want to add a fixed position div (notification) inside the center section so that it remains in place when scrolling. Additionally, I want this notification to resize according to changes in ...

htmlcss

CSS - Revealing an element on the backface post flip animation

I encountered an issue while working on a CSS flip card project. Despite using backface-visibility: hidden;, one element remains visible from the other side. In the simplified snippet provided, if you click on more in the bottom right corner, the card fli ...

css

Unable to remove the most recently added Object at the beginning

I am currently working on a project to create a dynamic to-do list. Each task is represented as an object that generates the necessary HTML code and adds itself to a div container. The variable listItemCode holds all the required HTML code for each list it ...

javascriptjqueryhtmlcss

Modify the color scheme of the parent div by selecting the child div (using only CSS and HTML)

I am working with a nested div structure, where one is contained inside the other: <div class="outer"> <div class="inner"> </div> </div> It looks something like this: I am wondering if it's possibl ...

htmlcss

Using React Typescript to create a button component with an attached image

I am currently utilizing React with Typescript. How can I incorporate an image into my button? I've attempted to do so without any errors, but the button appears blank. What's the best way to style my button element using Emotion CSS in this ...

cssreactjstypescriptemotion

Bring in an SVG element from a separate document while retaining the CSS <style> details from the original source

Creating a number of SVG files can be made easier by keeping common symbols in one file and importing them into others. An effective method for achieving this is using the <use> element: <use href="common.svg#symbol1" /> However, th ...

csssvgimportexternalshadow-dom

Reposition icons accordingly while incorporating a new set of icons

After creating a new icon set font, I noticed that the icons are not positioning correctly and appear smaller than expected when loaded: https://i.stack.imgur.com/1OsAL.png https://i.stack.imgur.com/zmLQq.png I attempted to adjust the .icon class by add ...

css

Unable to choose a child div using jQuery

<div class='class1'> <div class='class2'> <div class='class3'> some unique text </div> <div class='class5'> more unique text </div> </div> < ...

jqueryhtmlcssselect

The dimension of HTML on an IOS web application

After successfully designing a web app that works well on desktop browsers and iPad Safari, I encountered an issue when trying to install it as a hybrid app using cordova 3.3.0. The problem arises with the height not displaying properly. Despite including ...

ioshtmlcsscordova