Element floating over the edge

Desired Outcome: The CSS selector .header__main .left-col should function identically to .header__bar .left-col. It should align perfectly with the edge.

Issue: The element with class .left-col is not behaving correctly in the second row alongside the search bar and motto.

/* STYLING */

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}

.container {
  display: block;
  position: relative;
}

.left-col {
  float: left;
}

.right-col {
  float: right;
}

.row::after {
  content: " ";
  clear: both;
  display: table;
}

/* navigation */

a {
  text-decoration: none;
}

ul {
  list-style-type: none;
}


/* HEADER */
/* header__bar */

.header__bar {
  background-color: #e5e5e5;
  height: 40px;
}

.contact,
.blog,
.youtube,
.live {
  display: inline-block;
  position: relative;
  line-height: 40px;
}

.blog,
.youtube,
.live {
  margin-left: 36px;
}

.blog__description,
.youtube__description,
.live__description {
  font-size: 14px;
}

.contact__phone {
  font-size: 18px;
}

.contact__description {
  font-size: 12px;
}

/* header__main */
.header__main {
  height: 86px;
}

.motto,
.search,
.user,
.cart {
  display: inline-block;
  position: relative;
  vertical-align: top;
  line-height: 86px;
}

.motto {
  font-family: "Kristi", cursive;
}

/* header__nav */
.header__nav {
  background-color: #f8f8f8;
}

@media only screen and (min-width: 1200px) {
  .container {
    width: 1200px;
    padding-right: 15px;
    padding-left: 15px;
    margin: 0 auto;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css" rel="stylesheet"/>
<div class="header__bar">
  <div class="container">
    <div class="row">
      <div class="left-col">
        <div class="contact">
          <span class="contact__phone">8 (800) 000-00-00</span>
          <span class="contact__description">Item</span>
        </div>
      </div>
      <!-- .left-col -->

      <div class="right-col">
        <div class="blog">
          <a href="#">
            <span class="blog__img"></span>
            <span class="blog__description">Item</span>
          </a>
        </div>

        <div class="youtube">
          <a href="#">
            <span class="youtube__img"></span>
            <span class="youtube__description">Item</span>
          </a>
        </div>

        <div class="live">
          <a href="#">
            <span class="live__img"></span>
            <span class="live__description">Item</span>
          </a>
        </div>
      </div>
      <!-- .right-col -->
    </div>
    <!-- .row -->
  </div>
  <!-- .container -->
</div>
<!-- .header__bar -->

<div class="header__main">
  <div class="container">
    <div class="row">
      <div class="left-col">

        <span class="motto">Motto</span>

        <div class="search">
          <form class="search__form" action="/" method="get" role="search">
            <input type="text" placeholder="Search" />
            <button>Search</button>
          </form>
        </div>
      </div>
      <!-- .left-col -->

      <div class="right-col">
        <div class="user">
          <a href="#">
            <span class="user__img"></span>
            <span class="user__name">John</span>
          </a>
        </div>

        <div class="cart">
          <a href="#">
            <span class="cart__img"></span>
            <span class="cart__description">Cart: <span id="cart__quantity"></span></span>
          </a>
        </div>
      </div>
      <!-- .right-col -->
    </div>
    <!-- .row -->
  </div>
  <!-- .container -->
</div>
<!-- .header__main -->

htmlcsscss-float

Answer №1

It appears that the expected height for header__bar is 40px, but it seems to be 42px. This discrepancy causes your child div to be larger than its parent, leading to the issues you are experiencing.

Please refer to the code below where I have indicated areas that need to be changed with comments.

Following the code snippet, you will find links to helpful articles.

/* LAYOUT */

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}

.container {
  display: block;
  position: relative;
}

.left-col {
  // left: 0;
  float: left;
}

.right-col {
  // right: 0;
  float: right;
}

.row::after {
  content: " ";
  clear: both;
  display: table;
}

/* nav */
 
a {
  text-decoration: none;
}

ul {
  list-style-type: none;
}


/* HEADER */
/* header__bar */

.header__bar {
  background-color: #e5e5e5;
  height: 40px;
}

.contact,
.blog,
.youtube,
.live {
  display: inline-block;
  position: relative;
  // line-height: 40px;
  vertical-align: middle; // Add this
}

.blog,
.youtube,
.live {
  margin-left: 36px;
}

.blog__description,
.youtube__description,
.live__description,
.contact__phone {
line-height: 40px; // Add this
}

.blog__description,
.youtube__description,
.live__description {
  font-size: 14px;
}

.contact__phone {
  font-size: 18px;
}

.contact__description {
  font-size: 12px;
}


/* header__main */
.header__main {
  height: 86px;
}

.motto,
.search,
.user,
.cart {
  display: inline-block;
  position: relative;
  vertical-align: top;
  line-height: 86px;
}

.motto {
  font-family: "Kristi", cursive;
}


/* header__nav */
.header__nav {
  background-color: #f8f8f8;
}

@media only screen and (min-width: 1200px) {
  .container {
    width: 1200px;
    padding-right: 15px;
    padding-left: 15px;
    margin: 0 auto;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css" rel="stylesheet"/>
<div class="header__bar">
  <div class="container">
    <div class="row">
      <div class="left-col">
        <div class="contact">
          <span class="contact__phone">8 (800) 000-00-00</span>
          <span class="contact__description">Item</span>
        </div>
      </div>
      <!-- .left-col -->

      <div class="right-col">
        <div class="blog">
          <a href="#">
            <span class="blog__img"></span>
            <span class="blog__description">Item</span>
          </a>
        </div>

        <div class="youtube">
          <a href="#">
            <span class="youtube__img"></span>
            <span class="youtube__description">Item</span>
          </a>
        </div>

        <div class="live">
          <a href="#">
            <span class="live__img"></span>
            <span class="live__description">Item</span>
          </a>
        </div>
      </div>
      <!-- .right-col -->
    </div>
    <!-- .row -->
  </div>
  <!-- .container -->
</div>
<!-- .header__bar -->

<div class="header__main">
  <div class="container">
    <div class="row">
      <div class="left-col">

        <span class="motto">Motto</span>

        <div class="search">
          <form class="search__form" action="/" method="get" role="search">
            <input type="text" placeholder="Search" />
            <button>Search</button>
          </form>
        </div>
      </div>
      <!-- .left-col -->

      <div class="right-col">
        <div class="user">
          <a href="#">
            <span class="user__img"></span>
            <span class="user__name">John</span>
          </a>
        </div>

        <div class="cart">
          <a href="#">
            <span class="cart__img"></span>
            <span class="cart__description">Cart: <span id="cart__quantity"></span></span>
          </a>
        </div>
      </div>
      <!-- .right-col -->
    </div>
    <!-- .row -->
  </div>
  <!-- .container -->
</div>
<!-- .header__main -->

Articles

  • Issues with the width and height of CSS container and child elements
  • 6 Methods For Vertical Centering With CSS
  • All About Floats

Answer №2

The current issue you're facing is with the left property on the .left-col element, as it requires a specified position value to be applied correctly. To fix this, make sure to add the rule position: absolute to both the .left-col and .right-col elements:

/* LAYOUT */

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}

.container {
  display: block;
  position: relative;
}

.left-col {
  position: absolute;
  left: 0;
  float: left;
}

.right-col {
  position: absolute;
  right: 0;
  float: right;
}

.row::after {
  content: " ";
  clear: both;
  display: table;
}

/* nav */

a {
  text-decoration: none;
}

ul {
  list-style-type: none;
}


/* HEADER */
/* header__bar */

.header__bar {
  background-color: #e5e5e5;
  height: 40px;
}

.contact,
.blog,
.youtube,
.live {
  display: inline-block;
  position: relative;
  line-height: 40px;
}

.blog,
.youtube,
.live {
  margin-left: 36px;
}

.blog__description,
.youtube__description,
.live__description {
  font-size: 14px;
}

.contact__phone {
  font-size: 18px;
}

contact__description {
  font-size: 12px;
}
....(truncated for brevity)

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css" rel="stylesheet"/>
<div class="header__bar">
  <div class="container">
    <div class="row">
        ...
      </div>
     
      <div class="right-col">
         ...
      </div>
    
    </div>
 
  </div>

  ...

</div>
   .... (additional content truncated)

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

Radio buttons in 'Block Style' functioning perfectly on all devices except for iPad

I am facing an issue with a group of radio buttons that I have styled to display as block elements, making them look like buttons while hiding the actual radio button itself. This setup works perfectly on Chrome and Firefox on desktops and Android tablets, ...

htmliosipadcss

Python script reads local HTML files and extracts text using the findall function to create a new HTML file

I am attempting to gather data from multiple HTML files using the findall method and transfer them into a new HTML file. Currently, I have the following: news = ['16-10-2017.html', '17-10-2017.html', '18-10-2017.html', ' ...

pythonhtmlfindall

What is the best way in JavaScript to target a specific element in a href attribute in order to create Previous and

<li><a href="/chapter-1.html">Ch. 1 - TitleHere</a></li> <li><a href="/chapter-2.html">Ch. 2 - TitleHere</a></li> <li><a href="/chapter-3.html">Ch. 3 - TitleHere</ ...

javascripthtmljquerycss

instructions for ensuring gridview spans entire width of panel

I have a gridview that is contained within a panel. I am trying to make the gridview fill 100% of the width and height of the panel. This is what I've attempted so far: CSS .pnlGridView { position:relative; float:right; heig ...

asp.netcssgridview

How to apply gradient colors to borders using CSS

Is it possible to create a simple border bottom color with a gradient effect? div{ border-bottom:10px solid linear-gradient(#FF4000, transparent); height:20px; width:auto; background:#ccc; } <div></div> ...

css

Iterate through the loop to add data to the table

Looking for a way to append table data stored in local storage, I attempted to use a loop to add cells while changing the numbers based on row counts. Here is my JavaScript code snippet: $(function() { $("#loadTask").change(function() { var ta ...

javascriptjqueryhtmljsonjquery-ui

Guide to rendering the chosen option of an input dynamically in EJS

I have a dropdown menu where users can select an option to send to the database. Now, when they revisit the page, I want them to see the option they previously selected. Using EJS templating: <div class="form-group col-sm-6" style="width: 50%;"> ...

javascripthtmlnode.jsexpressejs

CSS problem: Chrome scrolling overflow glitch (ghost margin/padding)

Hey there, I've run into a bit of an issue with two divs containing tables - one acting as a header and the other as a scrollable content area. Everything is working perfectly except for this mysterious border/margin that keeps appearing in Chrome on ...

htmlcssgoogle-chrome

Discovering an element within an HTML response using jQuery AJAX

Check out the code snippet below: ajax_obj = $.ajax( { data: data, success: function(answer) { console.log(answer); console.log($('#table_conferences_tbody', answer).html()); ...

javascriptjqueryhtmlajax

Is it possible to apply CSS opacity only to the background color without affecting the text on top of it

Is it possible to set the opacity property specifically for the background of a div, without affecting the text inside it? I attempted to achieve this with the following code: background: #CCC; opacity: 0.6; However, it seems like the opacity change is ...

cssopacity

Using HTML5 to create an event handler for a click event

I am currently tackling a test paper for the Microsoft Certification in Programming in HTML5 with JavaScript and CSS3. I have encountered a question for which I cannot find the answer: The Question: You have been tasked with creating a JavaScript functio ...

htmlcssevent-listener

Issue with Firefox compatibility with Bootstrap Modal functionality

While building my website using bootstrap, I encountered a strange issue. When I click on a button that contains the following code: <form action="javascript:$('#modal .modalbody').load('/controllers/forums/create_topic_modal.php?id=&apo ...

javascriptphpjqueryhtmltwitter-bootstrap

The command entered is not valid for 'text/css'. It is possible that there was a typo or the command is from a module that is not configured in

We are currently using Laravel 5.4 on a Linux server with Apache. Recently, we started encountering the following error in our /var/log/httpd/error_log file even though there have been no changes made to our .htaccess file: /var/www/html/public/.htaccess: ...

cssapache.htaccesstexterror-log

Steps for aligning items in a column horizontally in Bootstrap 5

After creating a Grid system with only 2 columns, I placed text in the first column and a carousel in the second. Despite setting a custom size for the carousel image, I'm facing difficulty centering it horizontally within the column. .title-sec { ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

"Within the boundaries of two tags, eliminate any spaces when using the display property set

I'm a bit confused about the behavior of display:inline-block. I noticed that when I use inline-block, it displays content in a smaller space across two tags. However, when I switch to using float: left, everything works fine. Does anyone have an ide ...

javascripthtmlcss

Unable to exceed a width of 100% in Asp.net Tables

I searched for similar inquiries without success. Here is a snippet from my aspx file: <div align="center" style="height: 350px; overflow-y: scroll; overflow-x: scroll; width: 100%;"> <asp:Table ID="tblReport" Font-Size="11px" runat="server" ...

c#cssasp.netwebforms

Converting flat JSON data into interactive HTML elements

After successfully saving my chatbot's conversation history as a flat json file following a previous question, I am now trying to display the contents of the json in my index.html file. Unfortunately, when I attempted to use the code provided in my ht ...

htmljsonnode.jsbotframework

Ways to align list items to the right and left in a stylish manner using HTML and CSS while maintaining alternating bullet points

Is there a way to create a zig-zag list where alternate list elements are right aligned while the others remain left aligned? I want it to look like this: Item1 Item2 Item3 ...

htmlcssalignment

What methods can be used to modify element attributes in Python?

I'm curious about how to utilize Python to modify an element in the HTML code of a webpage: In this case, I need to change it from: <input _ngcontent-mcp-c552="" type="number" name="bpm" placeholder="0" min= ...

pythonhtmlselenium

Can the html content provided by the user be extracted and highlighted?

When utilizing the onClick function in ReactJS, I am receiving the entire property which includes Lorem Ipsum is simply dummy text. However, I only require the highlighted content like "is simply dummy". Is there a way to achieve this?</p> ...

javascripthtmlreactjsonclickdom-events