The primary division containing two inner divisions, one centered and the other positioned to the right

I would like the layout to resemble the image provided. The div header contains two nested divs - the logo div should be centered, and the info div should be positioned to the right with some margin.

Answer №1

#container{ width:100%; height:100px;}

#banner{ width:33%; float:right; height:100px;}

#navigation{ width:33%; float:right; height:100px;}

Answer №2

There are several ways to achieve this type of layout.

Check out this example

The technique demonstrated here involves setting percentages for the widths in the header, allowing everything to responsively adjust to different screen sizes.

#header #logo{
    width: 33%;
    margin-right: -4px;
    height: 100%;
    background-color: blue;
    display:inline-block;
}

#header #info{
    width: 33%;
    height: 100%;
    background-color: lightblue;
    display:inline-block;
}

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

JavaScript problem with hovering action causing additional buttons to appear

Currently, I am developing a user interface where, upon hovering over an LI element, 2 buttons appear to provide additional functionality - "edit" and "remove". However, I am facing challenges with the mouse hit zones. The mouseover function works effect ...

Hide the overlay fullscreen menu upon clicking an anchor link

I'm having trouble with Javascript, but some of you might find this easy. I found a fullscreen overlay menu on Codepen and I'm trying to figure out how to close it when clicking an anchor link. Looking for assistance with adding javascript to c ...

Adjust the width of an HTML input using the Bootstrap 5 form-control class

Is it possible to set the width of an input using Bootstrap's form-control or input-group classes? In the example below, each input should have a width based on its maxlength attribute: <link href="https://cdn.jsdelivr.net/npm/<a href="/cd ...

Having issues with the width not functioning correctly in my table cells

Here is a sample I'd like to share with you: link CODE HTML: <table class="table prospects-table"> <thead> <tr> <th width="200">Name</th> <th width="200">E ...

What method can be used to incorporate Google Places API into a .js file without using a <script> element?

As I delve into the Google Places API documentation, I noticed that they require the API be loaded in this format: <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script> Is ...

What is the most efficient way to load a PHP page once the webpage has completely finished loading?

I'm relatively inexperienced when it comes to PHP and JQuery, so please bear with me if my knowledge is limited. Currently, I'm facing an issue where loading a small HTML table that contains information queried from game servers (like shown in t ...

Tweaking the placement of the dropdown menu in the subnavigation area

Just getting back into coding after a long hiatus - I've dabbled in the past but it's been about 6 years since I've worked with any code. Currently, I'm working on replicating a website for practice. I have created a nav bar and a drop ...

Unable to adjust dimensions with CSS width and height properties

I'm currently working on developing an online game with a login screen inspired by Paper.io. I have created the username input and play button, but there seems to be an issue with the width and height specified in the CSS file for the input field. Eve ...

The functionality of Vue is acting up with the HTML, unexpectedly refreshing when a button is clicked

I am currently experiencing an issue with my Vue application. When I click the button, it clears the input field (which it shouldn't) and doesn't perform any other actions. The variables "codigo" and "payload" do not display anything on the scree ...

I am encountering issues with certain sections of my HTML and PHP coding

There was a PHP Parse error: syntax error, unexpected ',' found in the index.php file on line 20 Here is the code snippet that caused the error: <?php $title = "Home"; $page = "index"; $return = TRUE; require( "./configuration.php" ); includ ...

Is it possible to enable auto play on HTML5 Video for iPad similar to BBC iPlayer?

Can HTML5 Videos automatically play on iPads? I used to believe that it wasn't possible because of iOS restrictions, but after trying BBC iPlayer on my iPad, I noticed that the videos did autoplay upon loading. Could this indicate that it is indeed ...

the pop-up modal function is malfunctioning

I can't get my pop up to work properly. When I click the button, the screen dims as if a pop up is going to appear, but nothing shows up. Can someone please assist me with this issue? Here is the HTML file: <!DOCTYPE html> <html lang="en"&g ...

Updating content with Ajax in Laravel

Hey, I'm currently facing an issue with my update functionality. Below is the blade code snippet: <div class="form-group floating-label" id="role_colaboration1"> <select name="{{$role}}[]" id="role" class="form-control"> ...

Reposition HTML content using regular expressions

My objective is to locate a block of HTML that contains comments and relocate it after the header section. The comment itself remains constant, but the content within the block varies across different pages and needs to be replaced using Dreamweaver' ...

Uncertainties surrounding the use of JSON data versus a JavaScript object

As a newcomer to programming, I have ventured into Stack Overflow and W3schools to enhance my skills. Recently, I created a small project for educational purposes. One dilemma is bothering me - is the JSON file I generated actually in proper JSON format o ...

Why is my card not laying flat in a horizontal position?

Could you please assist with aligning the cards horizontally in a row instead of vertically? I would like to have 3 cards in one row. Thank you. <div class="container"> <div class="row"> <div class="col-md-4"> <di ...

Build a table with consistent columns and flexible rows utilizing CSS and HTML

Just starting out with CSS/HTML and looking for guidance on creating a table with a variable number of rows. Any tips on how to achieve this using CSS? I'm aiming to replicate a table with a similar structure, but struggling to figure out how to defin ...

What causes padding/margin when using overflow: hidden?

Today, I came across a peculiar issue. Adding the overflow: hidden style to a div seems to create extra blank space around its header content, resembling margin or padding. While this might go unnoticed in most cases, it's causing a problem with an an ...

Managing numerous ajax forms within a single page

Upon receiving advice from the following inquiry Multiple forms in a page - loading error messages via ajax, I am endeavoring to incorporate multiple forms within one page. The goal is to insert error messages into the corresponding input div classes. I pr ...

What causes the presence of a boundary around the svg?

I have been encountering an issue while attempting to incorporate my logo into the header of my webpage. Specifically, when viewed on smaller screens, I noticed that there is a margin surrounding the SVG image. Below is my HTML file: <html lang="e ...