I'm having trouble aligning two divs side by side

Does anyone have any suggestions on how to align <head> and <head> horizontally? I've attempted using the CSS code below, but it doesn't seem to be working: 

.header_nav {
    float:left;
    clear:both;
}

You can view the actual page at

Thank you for your assistance!

    <header id="branding" role="banner">
            <div class="header_nav">
            <div class="head">
                <hgroup>
                    <h1 id="site-title"><a href="/"><img class="title-image" title="Boli Stylus" src="http://www.bolistylus.com/wp-content/uploads/boli-logoLimeBlack.png" alt="stylus for iPad"/></a></h1>
                    <h2 id="site-description"></h2>
                </hgroup>
            </div>
            <div class="head">

            <ul>

                            <li><a href="/shop">SHOP</a></li>      


                            <li><a href="/about-us">ABOUT US</a></li>

                            <li><a href="/faq">FAQ</a></li>


                            <li><a href="/cart">YOUR CART</a></li>
                </ul>

            </div>  
</div>





    </header><!-- #branding -->

Below is the css for the content inside:

.header_nav ul {
    margin: 0;
    padding: 0;
    text-align: center;
    width: 400px;
}

#branding img {
    height: auto;
    margin-bottom: -30px;
    width: 34%;
}

.header_nav {
    background: none repeat scroll 0 0 #F3F3F3;
    float: left;
}
htmlcss

Answer №1

Navigating floats and clearing can be tricky - here's my workaround that may not be the cleanest, but it does the job.

Initially, make sure to apply float: left; to both div elements. Additionally, for better alignment of later elements, try this:

<div id="header_nav">
<div class="head" style="float:left">...</div>
<div class="head" style="float:left">...</div>
<br style="clear:both"/>
</div>

Although using a break may not be ideal (there are more efficient options), I find it challenging to make them work consistently as I am still learning. Remember to utilize CSS instead of inline styles.

Edits: Initially misunderstood your request for two "head" classes to float - adjusted it but got beaten to the punch.

Answer №2

To make the divs inside header_nav float, you should apply the float property to them individually, not to the header nav itself.

.header_nav .head { float: left; }

Make sure to add a break with clear both after floating the divs

<header id="branding" role="banner">
        <div class="header_nav">
          <div class="head">           </div>
          <div class="head">             </div>  
          <br style="clear: both;"/>
        </div>
</header><!-- #branding -->

Answer №3

Removing the clear:both property is essential in maintaining the float layout. By specifying clear:both, you are essentially indicating that no elements should be allowed on either side of the floated element.

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 styling in CSS does not accurately reflect its relationship to the parent

My code includes a div with the ID of "outer" nested inside a parent div with the ID of "Container". I'm attempting to adjust the properties of the outer div relative to its parent, meaning its width, height, and other attributes should be based on th ...

htmlcssparent-child

Maintaining a consistent distance from the baseline while adjusting the font size dynamically in an HTML text element

Looking to lock a text element to the baseline while also resizing its font dynamically when the window is resized. I created a demonstration on jsfiddle. However, the issue arises when the window size changes; the distance from the bottom of the window i ...

javascripthtmlcss

CSS active state not functioning properly

While working with asp.net4.0, I am attempting to create a menu bar using CSS. Everything seems to be working fine except for the 'active' code, which doesn't seem to be responding as expected. Any insights into why this might be happening? ...

css

Designing a versatile pop-up window with jQuery or JavaScript that functions seamlessly across all web browsers

I've encountered an issue with my code where it displays a popup message correctly in Chrome, but when testing it on Firefox and Edge, it creates a strange box at the end of the page instead. Here is the code snippet I'm referring to: var iframe ...

javascriptjqueryhtmlcsspopupwindow

Manipulating classes within ng-class in AngularChanging classes in ng-class dynamically

Featuring multiple elements with an ng-class that behaves similarly to a ternary operator: ng-class="$ctrl.something ? 'fa-minus' : 'fa-plus'" To access these elements, we can compile all the ones with fa-minus and store them in a lis ...

javascriptjquerycssangularjsjquery-selectors

Expanding a CSS div when the content wraps on smaller screens

When viewing the menu on standard screens, everything looks good. However, on smaller screens, the menu items start to wrap which is fine. The only issue is that the containing div #nav does not automatically enlarge along with it. I would like for the div ...

css

Tips for improving the speed of loading infinite scroll pages

I am currently working on scraping over 100k rows from the provided URL. The data goes back approximately a month, loading in batches of 7-8 rows at a time. My current approach involves using a macro to scroll down the page slowly, which is effective but ...

javascripthtmlseleniumweb-scrapingautomation

Efficiently Aligning Elements in CSS both Vertically and Horizontally

I'm struggling to align my form both vertically and horizontally. It's okay if this doesn't work on IE - I will include an IE detection script to prompt users to switch browsers. However, Firefox and Chrome support is essential. Below is m ...

htmlcss

Trouble with displaying my three.js 3D model

I've tried multiple solutions I found, but none have fixed the issue of not being able to display 3D models. Many have suggested that it could be a problem with the camera, but so far I haven't been able to resolve it. Any assistance would be gre ...

javascripthtmlthree.js

What are some solutions for resolving the problem with the anchor attribute in Safari?

There is a problem with the anchor tag used in my website. The number 619-618-1660 is being displayed when I view the site on Safari browser or an iPhone, even though it is written as (href="tel:619-618-1660"). See the image at the link below for reference ...

phpwordpresshtmlcss

Altering CSS styles through JavaScript or jQuery

Exploring Options After investigating the use of .css() to manipulate CSS properties of specific elements, I came across a website showcasing the following CSS: body, table td, select { font-family: Arial Unicode MS, Arial, sans-serif; font-size: ...

javascriptjquerycssstyles

Issues with navigation drawer not functioning

function adjustMenu() { var navigation = document.getElementById("myTopnav"); if (navigation.className === "topnav") { navigation.className += " responsive"; } else { navigation.className = "topnav"; } } body {margin:0;} ul ...

javascripthtmlcss

Design a div in the shape of a trapezium with clipped overflow

Is there a way to create a trapezium using CSS/Html/Canvas? I have attempted to do so, but my current method is messy and not practical. div { width:0; margin-left:-1000px; height:100px; border-right:1000px solid lightblue; border-top:60px solid tra ...

javascriptjqueryhtmlcss

Why isn't my Bootstrap navbar expanding properly?

I am facing an issue with my toggle menu where it is not dropping down as a solid black block but instead in the center transparent. How can I fix this to make it drop down as a solid block and be positioned to the left? I have a bootstrap navbar that I mo ...

htmlcssnavbar

CSS Background color only applies to the lower section of the page

I'm attempting to create a social media button using an anchor tag and a fontawesome icon. My goal is to have the entire background colored black with CSS, but my previous attempts only resulted in the bottom half turning black. https://i.sstatic.net ...

htmlcss

The top row of a Bootstrap table generated with JavaScript does not display the background color as intended

I am currently using JavaScript to generate some HTML that displays a Bootstrap table. Below is the code for creating this: function displayTableData(d){ let html = ''; html += '<table id="my-table" class="table&q ...

javascripthtmlcssbootstrap-4

Creating a Background Cutout Effect with CSS Using Elements instead of Images

I'm working on creating a unique visual effect that simulates a "window" where the div placed above all other elements acts like a window, allowing the background color to show through. Take a look at this example for reference. My goal is to make th ...

cssz-index

Having trouble accessing the value of an item in a dropdown box on a website

I am currently developing a webpage using HTML5 and Knockout Js. I am facing an issue where I am unable to retrieve the ID of the selected item from a dropdown box in order to insert a value into an SQL table. As an example, consider the following SQL tab ...

javascriptjqueryhtmlsqlknockout.js

What are the best ways to integrate jQuery into a React application?

I am in the process of developing a responsive menu for my react app, but I'm facing some challenges as a newcomer to react. In order to achieve the desired functionality, I am trying to incorporate jQuery for menu toggling. However, when I attempt to ...

jqueryhtmlcssreactjs

Display div content depending on the clicked ID in AngularJS

Unique Header Links HTML <ul ng-controller="pageRouteCtrl"> <li ui-sref-active="active"> <a ui-sref="home" class="" ng-click="getPageId('live-view')">LIVE</a> </li> <li> <a ng-clic ...

javascripthtmlangularjsng-show