Tips for aligning two boxes horizontally using <div> elements?

Currently, I am learning HTML and CSS. My goal is to create a simple layout with a header, menu bar, navigation bar on the right side, and main section also on the right side. However, I am facing difficulty in aligning the navigation bar and main section next to each other.

The main section keeps appearing below the navigation bar instead of alongside it.

Here is the code snippet I am using:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <center> <div style="height:70px; width:800px; background-color:red; color:white; font-size:30px" align="center"> <strong>WELCOME</strong> </div> <div style="height:30px; width:800px; background-color:blue; color:white; font-size:15px; top:80px" align="center"> <div style="width:200px; float:left"> <a href="">HOME</a> </div> <div style="width:200px; float:left"> <a href="C:\Users\Harish\Desktop\c prog.html">liwjoejlsn</a> </div> <div style="width:200px; float:left"> <a href="">lskdjflsd</a> </div> <div style="width:200px; float:left"> <a href="">ABOUT</a> </div> </div> </center> <center> <div style="height:800px; width:800px; background-color:grey; color:white; font-size:10px; top:100px"> <div style="height:800px; width:200px; float:left; border-style:solid; border-width:2px;"> <ul> <li>Hello</li> <li>hey</li> <li>who is</li> <li>forgive</li> </ul> </div> <div style="height:800px;width:600px; float:left; border-style:solid; border-width:2px; left:200px;"> <p> lsjdgfio jsldfkslj;do fsmi;odfml dsijfo siuldhf iofj s dofus <br> klsjhdfioy oasdilufilh aoudsfk <br;> ksajhkdfjhu aosls </p> </div> </div> </center> </body> </html>
csshtmlalignment

Answer №1

If you're aiming to display two div elements next to each other, utilizing float:left; is the way to go. It appears that your current code includes outdated practices like center, and it would be beneficial to assign specific names to your div elements. Moreover, organizing your CSS code in a separate file and linking it to your HTML document is recommended for better organization.

While one post cannot cover everything, I have prepared some simple demonstrations to showcase how float:left; operates. Additionally, I have adjusted your code so that the divs are now positioned side by side.

FLOAT LEFT DEMO

YOUR CODE

Answer №2

In this instance, you have the option to utilize 

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

Checking the existence of a data attribute in plain JavaScript: A simple guide

Is there a way to determine the existence of an HTML5 data attribute using vanilla JavaScript? I attempted the following code snippet but unfortunately, it did not produce the desired result. if(object.getAttribute("data-params")==="undefined") { ...

javascripthtml

Exploring the art of CSS box-shadow and playing with margins

In one of my blog posts, I've applied CSS box-shadow to the <img> elements. To ensure that they adjust their size along with the column, I have set max-width:100%. However, the box-shadow spills over into the margins due to its rendering outsid ...

layoutmargincss

Obtaining text color in Selenium using Python

My objective is to extract the text color from each cell in a single column table. The HTML structure for a cell is as follows: <table class="table table-bordered table-hover"> <tbody> <tr> <td class="ta ...

pythonhtmlcssseleniumselenium-webdriver

The Bootstrap button is having trouble rendering correctly

I attempted to incorporate a Bootstrap search box in my code, expecting it to display like this: https://i.sstatic.net/bPNsE.jpg However, for some reason, it is not rendering correctly within my layout, which resembles this: https://i.sstatic.net/x3wyk.jp ...

htmlcssbootstrap-4

The right floated div gracefully hovers in the center of the page as the page finishes rendering

The website features a dynamic layout, with a log in status section that is aligned to the top right corner of the page. However, there seems to be an issue where this element remains centered on the page until all content is fully loaded, at which point ...

css

Is it possible to utilize ng-show in conjunction with display:none?

Check out my plunker. I'm facing an issue where even if the ng-show is set to "false", there is always a brief display for a few milliseconds when I refresh the page. I understand that this happens because Angular hasn't loaded yet, so I tried us ...

cssangularjs

Utilizing Node.js to dynamically inject variables in SASS compilation

I am currently working on an application where I need to dynamically compile SASS before rendering it on the client side (a caching system is in the works, so no worries there). At the moment, my tool of choice is node-sass and so far, everything is runnin ...

cssnode.jsexpresssassnode-sass

Bug with IOS double tap on Element UI VueJS select input element

Encountering a strange problem on iOS safari or chrome. When attempting to select an option from a dropdown input, the options show up correctly on the first tap, but when trying to actually select an option, it requires two taps to work properly. This is ...

cssiosvue.jsmobile-safarielement-ui

When utilizing the HTML select element, the <option> tag may only display the initial letter of the chosen option

Here is a snippet of my PHP code: <?php if($_POST['post'] == 'Post') { $cat = $_POST['cat']; $update = "UPDATE table SET category='$cat' WHERE id = '$id' "; $result = mys ...

htmlhtml-select

Adjusting the height of table rows based on the content within the <td> element

I am facing a challenge with a table that includes rows with 2 columns - one for images and the other for text. The issue arises when resizing large images in one column, causing the row to take its height from the image cell rather than the text cell. Sin ...

javascriptjqueryhtmlcssinternet-explorer-8

Strange spacing below body element discovered while browsing website in Firefox 7

Currently, I am facing an issue on my website in Firefox 7. A margin is causing the gradient in #wrapper to shift upwards from the bottom, disrupting the layout. Despite resetting the margin to 0 on body and html, I am unable to pinpoint the root of the pr ...

htmlcssfirefox7

Find and conceal the object within the list that includes the term "Ice"

The teacher's assignment is to create a radio button filter that hides items with the word "Ice" in them, such as "Ice Cream" and "Iced Tea." Here is the current code I have been working on: <!DOCTYPE html> <html> <head> <me ...

javascriptjqueryhtmlfunctionjquery-ui

Picture hidden beyond the words

I am trying to achieve a layout where an image is displayed behind an H1 tag, with the width of the image matching the width of the text. Here is my code: <div style="display: inline;"> <img src="http://img585.imageshack.us/img585/3989/m744. ...

htmlcsscss-position

The div has extra white space at the bottom due to the Hide/Show content feature

Having trouble stretching a scrolling div to 100% of its parent container's height? The Hide/Show content feature is causing whitespace at the bottom of the div. Check out the jsfiddle here: http://jsfiddle.net/fkvftff2/1/ LATEST UPDATE: The issue a ...

javascripthtmlcss

Expanding SVG width upon import through Icomoon

After exporting an SVG file from Illustrator (already "Fit to selected Art"), I encountered an error while importing it via the Icomoon App. Strangely, other SVGs are importing correctly. I would appreciate any help or insight you can provide. Thank you i ...

htmlcsssvgiconsfont-face

Incorporating YouTube links into calendar events for each specific date

Our team is currently developing an online class website where our client wants to incorporate recorded classes. These recorded classes will be uploaded to YouTube in unlisted format and then linked to specific calendar dates. I will share the code for the ...

javascripthtmlcsssasscalendar

AlignmentPositioning Customize Check Boxes with Progress Bars in Bootstrap 4

I have the code snippet below: <div class="row"> <div class="col-md-2"> <div class="custom-control custom-checkbox my-auto" style="display: inline; align-items: center;"> <input class="custom-control ...

htmlcssbootstrap-4

Is there a way to include a clickable image and a link (anchor) within a list item?

Can anyone help me figure out how to place an icon and a link inside a list item? I'm trying to add a small icon to the left of text in a navigation bar, while also making the entire bar clickable. I've searched online for solutions but haven&a ...

htmlcssstyles

What is the best way to incorporate personalized colors into mat-buttons?

Can anyone help me figure out how to use a custom color for a mat-button in my Angular project, instead of just using the default accent or primary colors? <button (click)="gotoDashboardHome()" mat-raised-button color="accent" class= ...

htmlcssangular

Navigating the waters of adding a CSS property to a jQuery variable pseudo selector

Is there a way to adjust the top position for $myClass both before and after? I attempted to do so with the following code: var $myClass = $(".myclass"); $myClass.filter(":before,:after").css("top",-23); ...

javascriptjqueryhtmlcss