It's really quite simple:
HTML:
<div>
<section class="left">
</section>
<section class="right">
</section>
<div class="clear"></div>
</div>
CSS:
div, section { border: 1px solid #000; }
.left { height: 100%; width: 200px; float: left; height: 200px; }
.right { width: 300px; float: right; height: 300px; }
.clear { clear: both; }
Fiddler: http://jsfiddle.net/H2c6g/
How can I make the div occupy the full height?
To ensure that the inner <section>s have a width of 100%, you can set the height of the enclosing <div> as well. Give this CSS a try:
div { height: 400px; background: #ccc; }
.left { height: 100%; width: 200px; float: left; background: #c00; }
.right { width: 300px; float: right; height: 300px; background: #00c; }
.clear { clear: both; }
To achieve this effect, simply include the following lines of code:
body,html {
height: 100%;
}
Additionally, set the height of the containing div element to 100%
You can refer to this live demonstration on JSFiddle
Not quite sure if this is the exact solution you're looking for
<div class="outer">
<section class="left">
</section>
<section class="right">
</section>
<div class="clear"></div>
</div>
div, section { border: 1px solid #000; }
.left { height: 100%; width: 200px; float: left; height: 200px; }
.right { width: 300px; float: right; height: 300px; }
.clear { clear: both; }
div.outer{
position:absolute;
height:100%;
}
If you're not concerned about older versions of Internet Explorer, consider using flexbox for your layout. See how it can be implemented below.
display:flex
Take note that I am specifying a height only for the .left class, with the .right class automatically adjusting to match it.
My approach would be to achieve this layout without using floats:
<div id="wrapper">
<div class="left"></div><div class="right"></div>
</div>
Additionally:
#wrapper {
border: 1px solid red;
height: 500px;
width: 100%;
overflow: hidden;
position: absolute; top: 0; left: 0;
}
.left {
position: relative;
background-color: yellow;
display: inline-block;
height: 100%; width: 50%;
margin: 0px;
}
.right {
position: relative;
background-color: blue;
display: inline-block;
width: 50%; height: 100%;
margin: 0px;
}
I am encountering an issue while loading models using three.js. I have an obj file with mtl and a glb model of the same object. When I load the model with the obj and the mtl loader, the object is not displayed in the browser. If I only load it with the ob ...
I'm encountering an issue with calling a JavaScript function. Here's the code snippet I'm using: <script type="text/javascript" src="<?php echo base_url().'assets/'?>js/jquery-1.9.0.min.js"></script> <script t ...
Seeking a way to automatically indent the HTML generated by my PHP script. I currently use HTML Purifier for validating internal textbox inputs, but I have reservations about using HTML Tidy due to its lack of active development and numerous reported bugs ...
I've been developing a customized Pomodoro timer with user-defined work and rest times. In my Timer component, I have the following initial logic: useEffect(() => { start(3); start(timeData.workTime); start(timeData.restTime); }, []) c ...
I'm struggling to find the right approach for my current project. Essentially, I have a MongoDB collection that I am iterating through using forEach, displaying the objects in a table with ejs. My goal is to allow users to click on specific objects an ...
I've implemented express gateway as my main service gateway. One of the services I have needs to update an image, and when I try to handle files independently using multer it works fine. However, once this service is routed through express gateway, th ...
Previously, my code was functioning perfectly with the mCustomScrollbar I implemented to scroll both vertically and horizontally on my table. However, while revising my jQuery code for organization purposes, I seem to have unknowingly altered something tha ...
My code is working properly, but I need my links to open with just a single click. The issue is that the delete, approve, and not approve links require a double click for their function to run. I'm hoping someone can help me with this. index.php < ...
How can I adjust the labels in the ant design donut chart to be parallel to the X-axis instead of rotating? const config = { legend: { position: labelPosition }, appendPadding: 10, data, angleField: "value", colorField: " ...
I am excited to experiment with toast notifications by creating them dynamically. Each toast has a unique id number and I increment a counter every time a new one is created. The current functionality includes the toast sliding down, staying visible for 3 ...
How can I retrieve a list from an MVC controller to a view using jQuery AJAX without getting the error message [object Object]? Here is my AJAX code: $.ajax({ type: 'POST', contentType: 'application/json; ch ...
HTML Code: The Zoom Component <div class="zoom py-3"> <i nz-icon nzType="minus" (click)="zoomToggle(false)" nzTheme="outline"></i><br> <i nz-icon nzType="plus" (click)=&q ...
Recently, I was tasked with retrieving some "data" from an xml feed and integrating it into a webpage that I am hosting on my server. My initial instinct was to utilize the jQuery Ajax api -- however, I encountered the following error. XMLHttpRequest can ...
Let me explain my situation concisely. I'm encountering an issue with my PHP project that I can't seem to resolve. The problem arises when I try to update the content using CKEditor on my website. Below is the configuration and instance of CKEdi ...
Imagine having an array of objects within your Vue state like the following: [ {name: "Daniel", default: false}, {name: "Ross", default: true}, {name: "Rachel", default: false}, {name: "Joey", default: false} {n ...
As I am trying to make an Ajax cross domain request, I have come across a strange issue. In the console of Chrome dev tools, I see the following error: "No 'Access-Control-Allow-Origin' header is present on the requested resource" Despite this ...
I am seeking assistance in implementing code that will trigger the following action: Upon clicking the 'Submit' button on a signup form after the subscriber enters their email address and name, the signup page should reload within the same tab wi ...
Can you help me figure out how to make the "mouseover" event prioritize detecting the child element over its parent? This is the jQuery code I've been using: <script> $(function() { $("li").mouseover(function(event){ $('#log&a ...
As I navigate through my styled HTML page, an interesting sequence of events unfolds. When the Create New List button is clicked, a pink div emerges, contrasting with the orange hue of the All Lists div. At this moment, a new user has joined but hasn' ...
Looking to make a change on my index page - swapping out a long Google Map for an embedded image version on mobile. The map displays fine on desktop, but on mobile it's too lengthy and makes scrolling difficult. I already adjusted the JS setting to "s ...