Attempting to align two div blocks side by side to occupy the entire page

Question

Attempting to align two div blocks side by side to occupy the entire page

Here's the HTML code snippet:

<div id="left" style="background: red; display: inline-block; float: left">
    aaaa<br />
    aaaaa
</div>
<div id="right" style="background: yellow; float: left"></div>

My goal is to make #right fill the remaining space that #left isn't using on the screen. I have attempted to achieve this using jQuery:

$('#left').height($(window).height());
$('#right').height($(window).height());
$('#right').width($(window).width() - $('#left').outerWidth());

However, I am encountering an issue as it doesn't seem to be working as intended. Feel free to check out the jsfiddle for reference: http://jsfiddle.net/UeLMA/1/

Do you have any suggestions or solutions?

jquery html css

Answer 1

Answer №1

Updated version: http://jsfiddle.net/UeLMA/4/

Include the following code snippet in your CSS to reset:

* {
margin: 0;
padding: 0;
}

Answer 2

Updated version: http://jsfiddle.net/UeLMA/4/

Include the following code snippet in your CSS to reset:

* {
margin: 0;
padding: 0;
}

Answer 3

Answer №2

The issue lies in the sizing of the two divs on your page. The second div is not fitting next to the first one because it does not take up the entire window width. To fix this, adjust the width of the second div using the following code:

$('#right').parent().width() - $('#left').outerWidth()

.

You can see the updated version in action on this fiddle:

http://jsfiddle.net/UeLMA/9/

To ensure accurate sizing, I am using the .parent() selector instead of relying solely on the window dimensions. This way, we account for any margins or padding that may be present on the containing body element.

Answer 4

The issue lies in the sizing of the two divs on your page. The second div is not fitting next to the first one because it does not take up the entire window width. To fix this, adjust the width of the second div using the following code:

$('#right').parent().width() - $('#left').outerWidth()

.

You can see the updated version in action on this fiddle:

http://jsfiddle.net/UeLMA/9/

To ensure accurate sizing, I am using the .parent() selector instead of relying solely on the window dimensions. This way, we account for any margins or padding that may be present on the containing body element.

Answer 5

Answer №3

Forget about jQuery, you can achieve this using just a few CSS tricks.

If you want an element to have 100% height, make sure all its parent elements also have their height set to 100%.

CSS:
```
html, body, #left, #right { height: 100%; margin:0; }
```
To make elements fill the entire page width, float them both to the left and give them a width of 50% each (or any ratio that adds up to 100%)

CSS:
```
#left, #right { float: left; width: 50%; }
```

Check out the live example here: http://jsfiddle.net/UeLMA/2/

Answer 6

Forget about jQuery, you can achieve this using just a few CSS tricks.

If you want an element to have 100% height, make sure all its parent elements also have their height set to 100%.

CSS:
```
html, body, #left, #right { height: 100%; margin:0; }
```
To make elements fill the entire page width, float them both to the left and give them a width of 50% each (or any ratio that adds up to 100%)

CSS:
```
#left, #right { float: left; width: 50%; }
```

Check out the live example here: http://jsfiddle.net/UeLMA/2/

Answer 7

Answer №4

Don't forget to take into consideration the padding and margin around the body.

http://jsfiddle.net/UeLMA/6/

CSS:

#left { background: red; display: inline-block; float: left }
#right { background: yellow; float: left; }
body {padding: 0; margin: 0;}

Make sure to switch from using outerWidth() to width():

$('#left').width()

Answer 8

Don't forget to take into consideration the padding and margin around the body.

http://jsfiddle.net/UeLMA/6/

CSS:

#left { background: red; display: inline-block; float: left }
#right { background: yellow; float: left; }
body {padding: 0; margin: 0;}

Make sure to switch from using outerWidth() to width():

$('#left').width()

Answer 9

Answer №5

Avoid relying on JQuery for this issue. The key issue in your script is that the default setting for div elements is to take up 100% width, causing them to stack vertically. Simply define specific widths for each left and right div, assign a height of 100% to both, and eliminate unnecessary JQuery code.

Answer 10

Avoid relying on JQuery for this issue. The key issue in your script is that the default setting for div elements is to take up 100% width, causing them to stack vertically. Simply define specific widths for each left and right div, assign a height of 100% to both, and eliminate unnecessary JQuery code.

Attempting to align two div blocks side by side to occupy the entire page

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Implement an innovative solution to automatically close the navbar component in tailwindcss on

.htacces Disables Styling on Page

Can the hasClass() function be applied to querySelectorAll() in JavaScript?

Strikeout list on click of a mouse

What's the best way to add animation to the send icon while hovering over the button?

Can you provide me with a comprehensive list of all the colors available in Twitter Bootstrap 3?

Trigger jQuery to play audio files

Generate text in reStructuredText with columns

Wiki experiencing issues with NodeJS HttpGet functionality

the functionality of jquery/ajax is not functioning properly

Is the [] value always populated in the second DropDownList?

How can you utilize the Array submission syntax within HTML coding?

Passing a JSON object to a different page using jQuery

How can I immediately disable a button upon clicking "cancel" on a modal that contains TextFields in React Version 18?

What is the best method for submitting information using AJAX and jQuery?

Creating a custom video to use as the favicon for my website

Having problems with querying a REST service due to JSONP limitations

Troubleshooting Issue with Nested ng-include in AngularJS: Difficulty arises when the parent element with the ng-include attribute is dynamically added using the ng-

Retrieve the rendered component color variables exclusively from the global color variable file

Creating new accounts with SQL in HTML code