Arrangement of elements in HTML and CSS

I'm struggling with the alignment of div boxes in HTML and CSS. I have a wrapper and 2 boxes, with the intention of having one box on the left and the other on the right. However, the box on the right keeps appearing below the other. I want to avoid using "top" as it interferes with other elements. Any suggestions on how to resolve this?

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>Harry Kitchener - Home</title>
    </head>

    <body>
        <div id="wrapper">
            <div id="navbar"></div>
            <div id="newsbar"></div>
        </div>
    </body>
</html>

#wrapper
{
    position: relative;
    height: 100%;
    min-height: 100%;
    min-width: 1000px;
    background-color: #ccc;
}

#navbar
{
    position: relative;
    height: 100%;
    width: 15%;
    background-color: #A13927;
}

#newsbar
{
    position: relative;
    margin-left: auto;
    height: 100%;
    width: 15%;
    background-color: #A13927;
}

RESOLVED:

#wrapper
{
    height: 100%;
    min-height: 100%;
    min-width: 1000px;
    background-color: #ccc;
}

#navbar
{
    float: left;
    height: 100%;
    width: 15%;
    background-color: #A13927;
}

#newsbar
{
    float: right;
    height: 100%;
    width: 15%;
    background-color: #A13927;
}
csshtml

Answer №1

By default, a div is displayed as "display: block". This means that blocks do not adhere to the "width" style and span the full width of the parent element. Any elements following a block-displayed div will be placed below it.

To display divs consecutively, you can add the style "display: inline-block" to those specific divs.

Additionally, to make divs stick to the left or right, you can also use the styles "float: left" and "float: right" respectively.

Answer №2

To achieve the desired layout, include the properties Float:left and float:right:

#header
{
    position: absolute;
    height: 80%;
    width: 20%;
    background-color: #4A8123;
    float:left;
}

#sidebar
{
    position: relative;
    margin-left: auto;
    height: 80%;
    width: 20%;
    background-color: #4A8123;
    float:right;
}

Answer №3

The reason for this is that the elements are positioned relative to each other.

Here are a few different ways to solve this issue:

1) Utilize the float property on your elements. Take a look at this JSFiddle

For example:

#newsbar
{
    float: right;
    width: 15%;
    background-color: #A13927;
}

2) Consider changing your positioning to fixed, although absolute is likely what you need. View this JSFiddle

For instance:

#newsbar
{
    position: absolute;
    right:0;
    width: 15%;
    background-color: #A13927;
}

3) There are other options available as well (such as using display: table-cell, and more)

Answer №4

There are numerous ways to tackle this problem. Below are three techniques, each yielding slightly varied outcomes. jsFiddle

HTML:

<div class="method-1">
    <div class="left">
    </div>
    <div class="right">
    </div>
</div>
<div class="method-2">
    <div class="left">
    </div>
    <div class="right">
    </div>
</div>
<div class="method-3">
    <div class="left">
    </div>
    <div class="right">
    </div>
</div>

CSS:

div div {
    height: 10em;
    width: 15%;
    border: 1px solid red;
}

div.method-1 div {
    display: inline-block;
}
div.method-2 {
    height: 10em;
}
div.method-2 div {
    position: absolute;
    display: block;
}

div.method-2 div.right {
    left: 15%;
    margin-left: 1em;
}

div.method-3 {
    display: table;
    width: 30%;
}
div.method-3 div {
    display: table-cell;
}

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

Managing broken images within an internet browser

Is there a way to hide the broken image icon, similar to what's shown at '', when no image is displayed? I've set up a comment section using PHP and CSS that allows users to leave comments and upload photos. However, if a user decides t ...

phpcssbroken-image

AngularJS creates a new window in your application

I have created two html pages named web.html and addroute.html. Both pages are built with bootstrap. The angularjs script includes two controllers: webctrl and addctrl. In web.html, there is a button that, when clicked, opens the addroute.html page. I am ...

javascripthtmlangularjstwitter-bootstrap

Discovering the true width of an element using JavaScript

Hey there, I'm currently attempting to determine the exact width of a specific element and display an alert that shows this width. The code I am using is as follows: HTML Element <table cellspacing="1" cellpadding="5" style=";width:975px;border: ...

javascriptjqueryhtml

What is causing my HTML script tag to not recognize my JS file in Next.js?

Just starting out with Next.js and trying to access the web cam for a project I'm working on, but encountering an issue when writing in the "script" tag. Below is the simple code for page.js: export default function Live(){ return( <html> ...

javascripthtmlnext.js

Guide to transforming the image's color with CSS3

Is there a way to transform the color of an image from grayscale to green, red, or yellow using CSS3? I attempted the code below but unfortunately, it did not produce the desired result. img { -webkit-filter: hue-rotate(90deg); filter: hue-rotat ...

css

Global style applied to image property

Within my CSS file, I have a property (shown below) that is set to apply to all images: img{height:auto;max-width:100%;} However, I have a specific div where I do not want this property to apply to the images within it. Even after assigning a new image c ...

css

Bootstrap grid columns cannot properly handle overflowing content

Utilizing bootstrap version 5.2.3 I'm facing a challenge not with bootstrap itself, but rather my limited comprehension of the flex system and overflow. Displayed below is a scenario where the first div has a fixed height of 100vh. My goal is to kee ...

htmlcssflexboxoverflowbootstrap-5

Tips for resolving the issue of windows resizing due to off-screen elementsplacement:

During the development of a project, I wanted to incorporate an effect into my webpage. To achieve this, I positioned elements off the screen. However, upon running the code, the window resized with scrollbars, causing inconvenience for mobile users Below ...

jqueryhtmlcssresizewindow

It vanishes as soon as you move your cursor away during the animation

I created a button component with text animation, but I'm encountering an issue. When I hover over the button, the animation works smoothly. However, if I quickly move my cursor away or unhover in the middle of the animation, the text disappears unex ...

javascriptcssreactjsnext.jsframer-motion

Enhance your existing look by incorporating element.style into your designs

Is there a way to add styles onto an html element without overwriting existing css? element.style { "existing css;" } I'm trying to achieve the following result: element.style { existing css; opacity: 0; pointer-events: none; } But current ...

javascriptcss

The drop-down menu is misaligned from its designated position underneath the title

Trying to incorporate a dropdown menu into my website, I am structuring the HTML as follows: <ul class="topnav"> <li> SECTION TITLE <ul class="subnav"> <li>One</li> <li>Two</li> ...

jqueryhtmlcssdrop-down-menu

Generating modal pages on the fly

One thing that's been on my mind is creating modals for my page. Typically, I would include the HTML code for my modal directly in the page like this: <div class="my-modal"> <form action="/home/index"> <input type="text" class="txt- ...

javascriptjqueryhtmlmodal-dialog

Is there a way to target the mat-icon element using the icon's name in CSS

I have a group of mat-icons that are automatically generated, meaning I cannot assign them ids or classes. The only way to distinguish between them is by their names: <mat-icon role="img">details</mat-icon> <mat-icon role="img ...

htmlcssangularangular-materialmaterial-ui

Unable to locate the Bootstrap CSS file when deploying on PythonAnywhere

I recently created an admin panel that integrates with a database. To automate the process of generating the admin panel, I utilized flask-admin. Running the server locally on my PC displayed the bootstrap swatch correctly and everything worked seamlessly. ...

pythoncssflaskbootstrap-4flask-admin

Unable to alter or eliminate the grey background using material-ui

Struggling with a React application that incorporates material-ui. Despite my efforts, I can't seem to get rid of an unwanted grey background in one section of the app. Attempted solutions: body { background-color: #ffffff !important; } * { b ...

cssreactjsmaterial-ui

What is causing the floated element to overlap the element below instead of vice versa?

div { background-color: #00FFFF; } p { width: 50px; height: 50px; border: 1px solid black; margin: 0px; } #p1 { background-color: red; float: left; } #p2 { background-color: green; } #p3 { background-color: orange; } #p4 { backgr ...

htmlcsscss-float

What is the best way to target a specific item in a list using JavaScript in order to modify its appearance?

How can I modify the appearance of a specific li element when it is clicked? ...

javascripthtmlweb

What to do when JavaScript fireEvent isn't working as expected?

I've hit a roadblock while working on my JavaScript rendition of the classic game Battleship for a school project. I'm currently stuck on devising an AI for the opponent player. I have set up an event listener for when a cell is clicked on the pl ...

javascripthtmlcss

Displaying an image on canvas while showing a loading progress bar

I'm attempting to utilize this function to load an image into my canvas: function handleImage(e) { var reader = new FileReader(); reader.onload = function (event) { var img = new Image(); // img.onprogress = function (e) { ...

javascripthtmlcanvas

Wordpress Sub-Menu Being Eclipsed by Banner

After upgrading my Wordpress to version 3.5.1, I noticed a problem on my site where the Submenus are loading but quickly getting hidden behind the Banner. Despite trying various modifications in the CSS file, the issue remains unresolved (and might have wo ...

csswordpressmenu