Assigning a specific width to a div element will override the float property of the div

I encountered an issue while trying to position the divs titled "menu" and "content" side by side. Initially, they were placed correctly until I decided to set their width using % instead of px. After making this adjustment, the 'float: left;' property no longer had any effect. Despite attempting to rearrange the parameters in the CSS file, the desired layout was not achieved. My goal is to maintain a 20/80 ratio between these two divs while keeping them adjacent to each other. Is it possible to accomplish this using the current method, or am I overlooking some crucial information suggesting that these properties cannot be applied to the same div?

#menu {
  background-color: lightgray;
  width: 20%;
  min-height: 600px;
  padding: 10px;
  text-align: center;
  float: left;
}

#content {
  background-color: gray;
  width: 80%;
  min-height: 600px;
  padding: 10px;
  float: left;
}
<div id="menu">
  menu
</div>
<div id="content">
  content
</div>

Answer №1

It appears that the issue you are encountering is due to the padding causing a line break as it fills up 100% of the available space. Check out the example at https://jsfiddle.net/8dhs29u7/1/

#menu{
  float: left;
  background-color: lightgray;
  width: 20%;
  text-align: center;
  height: 600px;
}
#content
{
  float: right;
  background-color: gray;
  width: 80%;
  height: 600px;
}

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

Hover over the first element to remove its class and replace it with a different element

I am attempting to develop a function that adds the class = "actived" to the first Element. This class has a CSS style that highlights the element in question. I have a list of 4 lines and I want the first one to automatically receive this class, while t ...

Tips for smoothly transitioning from a simple transform to a rotate effect

I need help with an HTML element that needs to rotate when hovered over. Here is the code I have: The issue I'm facing is that I don't want a transition for translateX, only for the rotation. What steps should I take to achieve this? .cog { ...

A viewless Angular 2 component

Is it feasible to utilize Angular 2 without the need for a template or an @View? I am exploring alternative methods akin to the example shown below: Angular 1 index.html <div ng-controller="appcontroller"> <div ng-class="{active: isActive()}"& ...

When I click a button in d3 to refresh the data on my bar graph, the text fails to update accordingly

I've successfully created a series of data lists that modify the bargraph. Unfortunately, due to their differing x and y values, they end up printing new values on top of existing ones. Shown below is an image illustrating the issue where x and y val ...

Dynamic addition of CSS classes to HTML elements using PHP

I'm working on developing an application that includes multiple courses. Each course is completed over a certain number of days, such as 14 days or 20 days. To visually track progress, I've implemented a step progress bar that looks like this:htt ...

Rearrange the sequence of specific child elements within the Div

Is there a way to reverse the order of specific div's children elements using just CSS? For instance: I need <div id="parent"> <a>A</a> <a>B</a> <a>C</a> <a>D</a> &l ...

Updating Bootstrap Indicators with jQuery on Click Event

Unfortunately, I am unable to share an image due to limited internet data. My goal is to switch each image to its sprite equivalent. There are three list items that I'm struggling to change because they each have two classes that need to be updated. ...

The radio button selection cannot be transmitted via email

Only the first radio button is selected <div class="field_radio" name="preference" > <input class="radio1" type="radio" name="preference" id="preference" value="team" onclick="ShowHideDiv()" /><label for="radio1"> ...

Python Selenium encountering issue with selecting search bar

I have been attempting to use Selenium to search for courses on and scrape the results. However, all the selectors I have tried so far have failed, resulting in empty arrays when printed. I am confused as to why these selectors are failing and what is the ...

Should I use margin-top, padding-top, or top?

I often mix up padding-top, margin-top, and top. My issue arises when I need to create a space of 15px. Using margin-top: 15px seems to work, but I suspect it might be incorrect? .subtitles{ font-size:13px; font-family: "Open Sans","Helvetica Neue", ...

A div element with a z-index of 9 remaining below another element with a z-index of 1

Even with a higher z-index, my <h4> and <a> elements are not visible above the background. <section class="no-padding main-slider mobile-height wow fadeIn"> <div class="swiper-full-screen swiper-container height-100 width-100 whit ...

Tips for creating a functional CSS zigzag border

I've been experimenting with creating a CSS zigzag vertical border and came across this Codepen for inspiration. However, my attempts only result in diamond shapes and I've been struggling to make it work. Here is the link to my Codepen. body ...

Is there a way to update the value of a variable with the help of a checkbox?

When I check the checkbox, the specOrder const gets updated as expected. However, I am struggling to figure out how to remove the value when the checkbox is unchecked. Below is the code I have been working on: const SpecialtyBurgers = () => { cons ...

The right side alignment is malfunctioning

I need assistance with creating a section on a webpage that resembles a piece of paper, where there is content displayed on white background against a grey background. Here's what my CSS currently looks like: body { background:grey; } .page { ...

How can I apply max-width and max-height to a background image?

It seems like a simple task. I am currently transitioning my layout to become more fluid by working on creating scalable images. While using the img tag and setting max-width to 100% is effective, I am considering using a div with the image set as its bac ...

Press here to unveil and modify using the Redactor JS WYSIWYG HTML editor

I am working on a project where I have three separate divs that are set to be editable using the attribute contenteditable="true". Additionally, I have configured the redactor wysiwyg toolbar to remain fixed on the page. Here is the structure in HTML: &l ...

Changing the screen resolution can cause the LI elements to become disorganized and appear out of

I have a menu that displays multiple links using a styled UL. Everything looks great at 100% resolution, but when I adjust the screen resolution, the links no longer fit within the menu and some end up on another line, causing issues. My concern is this - ...

Automation of transmitting HTML data to a database

After dabbling in web development for some time, I've come to realize that transferring data between an HTML form and a database can be quite challenging. My usual solution involves using an AJAX call to a PHP script, as illustrated in the image below ...

Exploring the possibilities of LimeJS HTML5 through the integration of various

Is it feasible to utilize various libraries such as Node.JS, JQuery, and LimeJS together without any limitations? ...

What are the steps for generating website endpoints using search query outcomes?

I am currently working on a ReactJS website as a part of my web development bootcamp project. One interesting feature I have incorporated is a search functionality that uses Flask routes to connect ReactJS endpoints (../Language.js) with my Sqlite3 databa ...