Troubleshooting problems with CSS affecting the placement of HTML <div> elements

Can you help me with this website? I'm trying to make the divs align next to each other with some spacing in between horizontally. Basically, I want them displayed side by side rather than on top of each other.

body {
background-image:url('wild_oliva.png');
} 
div.container   {
overflow: hidden;
}
div.end {
border-style:solid;
border-width:1px;
background-image:url(stressed_linen.jpg);
border-radius: 15px 15px 15px 15px;
margin-bottom:auto
}
div#body {
border-style:solid;
border-width:1px;
background-image:url(stressed_linen.jpg);
border-radius: 15px 15px 15px 15px;
margin-left:20%;
overflow: hidden;
width:80%;
}
div#sidebar {
border-style:solid;
border-width:1px;
background-image:url(stressed_linen.jpg);
border-radius: 15px 15px 15px 15px;

float:left;
width:18%;
float:left;
}
csshtml

Answer №1

To set the divs inline, utilize the following property:

display:inline-block;

Please be aware: There is a mistake in your doctype declaration

<doctype html>

It should be 

<!doctype html>

Note 2: I noticed only one div in your provided code.

Answer №2

I'm noticing that the blocks are aligning perfectly side by side in Firefox, Chrome, and Safari so I'm not entirely sure what the issue might be on your end. Are you experiencing this problem exclusively in IE7?

In any case, one solution would be to also float the body div to the left. You can update the css for div#body as follows:

div#body {
  float: left;
  margin-left: 1%;
  border-style:solid;
  border-width:1px;
  background-image:url(stressed_linen.jpg);
  border-radius: 15px 15px 15px 15px;
  overflow: hidden;
  width:80%;
}

Keep in mind that the left margin should be less than 2% of the width minus all borders (4px), otherwise the body div may extend too far and overlap with the sidebar.

Alternatively, you could float the div#body to the right and remove the left margin altogether:

div#body {
  float: right;
  border-style:solid;
  border-width:1px;
  background-image:url(stressed_linen.jpg);
  border-radius: 15px 15px 15px 15px;
  overflow: hidden;
  width:80%;
}

To ensure everything stays aligned, the total width of margins, borders, padding, and box areas must not exceed 100% of the browser window width.

Calculating the widths: 18% (sidebar) + 80% (body) + 2px (sidebar borders) + 2px (body borders)

This totals to 98% + 4px, which is always less than 100% across most browser sizes.

Answer №3

While the query is a bit unclear, I recommend removing the margin:20%; property from the div#body 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

Is there a better method to determine the width when utilizing the jQuery UI resizable feature for improved efficiency?

I'm currently working on a website that features a resizable sidebar. I want the icons and text within the sidebar to shrink proportionally when the user resizes it. Right now, I have implemented an if statement to check if the sidebar's width fa ...

javascriptjqueryhtmlcssuser-interface

How to Resolve File Paths in CSS Using Angular 7 CLI

My assets folder contains an image named toolbar-bg.svg, and I am attempting to use it as the background image for an element. When I use background: url('assets/toolbar-bg.svg'), the build fails because postcss is unable to resolve the file. How ...

cssangularsasscommand-line-interfaceassets

"What is the best way to switch between multiple data targets and toggles in bootstrap using the HTML data toggle attribute

I am currently coding an animated hamburger icon for the Bootstrap navbar, and I need to find a way to toggle both the hamburger icon and the responsive navbar. Is there a method or code snippet that allows me to toggle these two elements independently usi ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to achieve a smooth rotation effect ranging from 1° to 359° using HTML/CSS in conjunction with JavaScript

Currently, I am retrieving rotation data from a sensor and transmitting it to a webpage containing a 2D-Model that rotates based on this data. To ensure a smoother motion, I have incorporated a CSS transition. However, an issue arises when the rotation da ...

javascripthtmlcsstransition

Create an overlay that completely masks the height of a different element

Having a variety of elements on my screen that require overlays, I find myself facing a challenge. These elements come in different sizes and can be resized while the page is active. Although I managed to position overlays using CSS, the issue of 100% hei ...

jquerycss

Trigger the onClick event of an element only if it was not clicked on specific child elements

<div onClick={()=>do_stuff()}> <div classname="div-1"></div> <div classname="div-2"></div> <div classname="div-3"></div> <div classname="div-4"></div> ...

javascripthtmlcssreactjsfrontend

Start flicker issue in Vue 3 transition

I have created a carousel of divs that slide in and out of view on the screen. However, I am facing an issue where during the start of each transition, when a new div is rendered (i.e., the value of carousel_2 changes), it appears without the transition-en ...

javascriptcssvue.jstransitionvuejs3

Issue with the top margin of the body

Recently, I've encountered a peculiar problem with a standard website layout that I use. The issue seems to be centered around the space between the top and the first div: navbar. No matter what I try, I just can't seem to remove it, as the reas ...

htmlcss

changes in size in relation to the position of the parent element

Utilizing the transition:scale(1.2) property to conceal a div positioned in the lower left corner of the viewport. Currently, the scaling effect originates from the center as intended: View 'CURRENTLY' on Fiddle I aim to scale it as if the div ...

csscss-transitions

Uncertainty surrounding the extent of a button's scope within an Angular application

(click) event in one instance of a component is causing the function in another instance to be triggered unexpectedly. I am having trouble describing this issue. For reference, I have included a working example on stackblitz. When clicking on both buttons ...

htmlangularangularjsangular-directiveangular-components

Changing color of Font Awesome Icons upon hover, without any animation

I need assistance with changing the color of font awesome icons on hover without any animation. Specifically, I want the icon colors to transition from indigo to blue and finally red when a user hovers over them, without the colored icon appearing abruptly ...

htmlcssbootstrap-4

What is causing the :active property to fail to work properly?

I'm currently working with Bootstrap, but I'm experiencing an issue with applying the :active state as a background color. It's not showing up, although it is changing the text color. Here is the HTML code: <button class="btn btn_sty ...

cssbootstrap-4css-selectors

Steps to Show an Image When Hovering and Clicking on the Relevant Div

CSS: .imgECheck { position: absolute; top: 0; right: 5px; width: 15px; height: 15px; display: none; } .imgFCheck { position: absolute; top: 0; right: 5px; width: 15px; height: 15px; display: none; } Is ther ...

jqueryhtmlcss

Guide to positioning elements in CSS

I'm struggling to get all the elements to align in a single row. I've tried using display: inline-block, but it's not working as expected. I'm working with DataTables and I want the button images to be aligned with the page number box. ...

htmlcssdatatables

How to create a slideToggle effect for nested ul and li elements

Initially, everything was working fine until I put it through the W3C validator. After fixing the errors, now it's not functioning as expected. I have created a jsfiddle The setup involves nested ul elements being used as dropdowns, with headers tha ...

jquerycssnestedhtml-lists

The left side of the form input material is obscured unless the necessary criteria are fulfilled

I am currently in the process of developing the front-end for a web application using the material library. The issue I am facing is that when a field does not meet its requirements, such as needing to enter a 'bedrijfsnaam', the border turns red ...

cssangularmaterial-uiangular-material

Troubleshooting a problem with the navigation links on a single-page website with a

https://i.sstatic.net/5xcv9.png My website alampk.com features a single page layout with a fixed navbar at the top. However, when I click on links like exp, portfolio, etc., the section moves to the top but a portion of 50px gets covered by the navbar. I ...

jqueryhtmlcsstwitter-bootstrap-3

Rectangles on canvas, each with identical dimensions, appear in varying sizes when positioned at different locations

In my canvas, I have created two rectangles using the rect element. Both rectangles are supposed to be 40 units wide and 20 units tall. The first rectangle starts at coordinates 0,0 for its top-left corner, while the second one begins at 60,40. Interesti ...

javascripthtmlhtml5-canvas

Tips for transferring value between custom elements in Polymer 1.0

I have developed two unique custom elements named student-details.html and student-service.html This is how the student-details.html file is structured: <link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" hre ...

javascripthtmlweb-componentpolymer-1.0

Adding images sourced from the News API

I have successfully integrated an API from newsapi.org, and it's functioning well. However, the data I receive is only in text format and I would like to include images for each headline. I'm unsure of how to do this since the headlines are dynam ...

jqueryhtmljsonajax