Setting a div's width to cover 100% of the screen's width

I'm currently working on creating a 2 column layout using divs. The left column has a fixed size of 150 px, while the right column should extend to the right boundary of the browser. I've tried using both width:auto and width:100% values for the right column, but neither seem to be working as expected.

CSS : 

 html {
    height:100%; width:100%
}
body {
    color: #000040; 
    text-align: left; 
    padding:0; 
    margin:0; 
    height:100%; 
    width:100%
}
#header {
    position:relative; 
    float:left; 
    background-color: #000053; 
    width: 100%; 
    height: 76px
}
#wrapper {
  position:relative; 
  overflow:hidden; 
  width:100%; 
  height: 100%; 
  margin:0px auto; 
  padding:0; 
  background-color:Aqua
}
#container {
    clear:left; 
    float:left; 
    overflow:hidden; 
    width:100%; 
    height:100%
}
#left_column {
    position: relative; 
    float: left; 
    background-color:Fuchsia; 
    width: 150px; 
    overflow:hidden; 
    height:100%
}
#right_column {
    position: relative; 
    float:left; 
    overflow:hidden; 
    background-color:Blue; 
    height: 100%; 
    width:auto }

HTML

<html>
    <body>
        <div id="wrapper"> 
            <div id="header">
               HEADER
            </div>
            <div id="container">
                <div id="left_column">
                    LEFT COLUMN
                </div>
                <div id="right_column">
                    RIGHT COLUMN
                </div>
            </div>
        </div>
    </body>

</html>
csshtml

Answer №1

To improve the layout, I suggest removing any position statements and only applying a float:left to the left column while giving the right column a margin-left:150px. This should resolve any spacing issues.

In addition, you can remove the width:100% statements from elements that are not floated since they will automatically expand to 100% width.

Furthermore, consider adding overflow:hidden to the wrapper if you need the container to resize based on its content's height due to floats inside it.

Answer №2

Make the following changes to the right_column div: switch the position from relative to fixed, set the width to 100%, and add left:150px. Your updated CSS for the right_column will then look like this:

#right_column {
        position: fixed;
        left:150px;
        float:left;
        overflow:hidden;
        background-color:Blue;
        height: 100%;
        width:100%; }

You can view the changes in action by visiting http://jsbin.com/ejetu3

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

Set the background color of the container row to extend the full width, encompassing

I am working on a grid container and I want to change the background color of the second row within it. Check out my Fiddle This is the HTML markup: <div class="totalContainer totalContainer__space"> <div class="totalContainer__ ...

htmlcss

Is it possible to modify the CSS styling in React using the following demonstration?

I am attempting to create an interactive feature where a ball moves to the location where the mouse is clicked. Although the X and Y coordinates are being logged successfully, the ball itself is not moving. Can anyone help me identify what I might be overl ...

javascriptcssreactjstypescript

What could be causing my website to have a horizontal scroll even when the width is set to 100%?

My website seems to be scrolling horizontally, possibly due to an issue with the footer. I suspect it might be related to the social media icons in the footer, but I'm not entirely sure. Any guidance on resolving this problem would be greatly apprecia ...

htmlcss

Chrome does not support top.frames functionality

I have three HTML pages: main.html, page1.html, and page2.html. I am displaying page1.html and page2.html within main.html using the code below. <!DOCTYPE html> <html> <frameset frameborder="1" rows="50%, *"> <frame name="f ...

javascriptjqueryhtml

jquery event delegation doesn't function properly on statically rendered content

When trying to use jQuery event delegation, I encountered an issue where it worked perfectly on elements that were dynamically added but not on static content already present. The 'alert('test')' function performed as expected on the dy ...

jqueryhtml

Implementing a backdrop while content is floating

I am facing an issue with a div that has 2 columns. The height of the left column is dynamically changing, whereas the right column always remains fixed in height. To achieve this, I have used the float property for both column divs within the container di ...

htmlcss

Methods for Expanding a Div within an Oversized Row, Despite Height Constraints

I have a situation where I need to adjust the height of a cell in a table. One of the cells contains a larger element that causes the row to expand vertically. I also have another cell with a div element set to 100% of the cell's height. However, I wa ...

htmlcss

Expanding the visual in a spacious display with the help of ng-carousel from the Bootstrap framework

I have created a slider with multiple images on a website using Angular 4. The slider is displayed in a small area of the webpage and I would like to add a feature where the user can click on an image to view it in a larger screen or window. This could i ...

javascripthtmlangularbootstrap-4angular5

The CSS menu dropdown fails to function properly on desktop view when there is longer content present

I attempted to merge two different navigation bars, one sticky and the other responsive. The goal was to combine https://www.w3schools.com/howto/howto_js_navbar_sticky.asp with https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp Curr ...

javascripthtmlcss

Swapping out a <DIV> element following a specified duration

Looking to swap out DIV-A with DIV-B on a landing page after 10 seconds. After some research, it seems like JQUERY is the best option, but I'm unsure about how to proceed. Most solutions involve cycling through DIVs or replacing them on a button clic ...

jqueryhtmlreplace

Located just above the edge of the screen with absolute positioning

One of the features on my website is a small modal that smoothly slides in from the top of the page upon entering, and then slides back out again when clicked on. However, I am encountering an issue where I do not want the modal to completely disappear aft ...

csspositioncss-animationskeyframe

Transform a 3D text rotation JavaScript file into an Angular component tailored TypeScript file

I have a javascript file that rotates text in 3D format, and I need help converting it into an Angular component specific TypeScript file. You can find the codepen for the original JavaScript code here. Below are my Angular files: index.html <!doctyp ...

javascripthtmlcssangulartypescript

How to apply background images to LI elements using CSS

I've been experimenting with CSS-generated tabs to display an active state of an arrow underneath the tab. I tried using the background position properties to position the image for the hover event, but it would extend beyond the predefined boundaries ...

htmlcssbackground-imagehtml-lists

How can I assign a true or false value to an input variable in HTML using AngularTS?

I copied the following HTML code: <tag-input fullWidth id="inputDir" formControlName="inputDir" [modelAsStrings]="true" [placeholder]="'choice feature'" ...

htmlangulartypescript

jQuery: Trouble with executing the Ajax request

I am working with Jquery to track the number of clicks and keypresses by users. $(document).ready(function(){ var countClick = 0; var keyClick = 0; $("body").mousedown(function(){ countClick ++; }); $("body").keypre ...

javascriptjqueryhtmlajax

RequestDispatcher.forward() does not work when servlet is invoked through an Ajax POST request

My login page involves user authentication through the firebase and sending the request to a servlet. When I click the submit button with correct credentials, the firebase authentication works, the servlet is called but an error is displayed in the browser ...

javascriptjavahtmlajaxservlets

How can I trigger an Onclick event from an <a tag without text in a Javascript form using Selenium?

Here is my original source code: <a onclick="pd(event);" tabindex="0" issprite="true" data-ctl="Icon" style="overflow: hidden; background: transparent url("webwb/pygridicons_12892877635.png!!.png") no-repeat scroll 0px top; width: 16px; height: 16px ...

javascripthtmlseleniumonclick

Ascending to the Peak within a div

<script type="text/javascript"> $(document).ready(function(){ updateContent(); }); function updateContent(){ $('#mainDiv').load('home.php', function(){ scrollToTop(); }); } ...

javascriptjqueryhtmlcss

The sidebar remains fixed in height and does not expand vertically

Need Help: My sidebar won't expand in height when I update content. Is there a way to make it adjust using just HTML and CSS? html code: <div id="main"> <section> More text goes here... </section> <div id="sideb ...

htmlcsssidebar

Tips for inserting values into a string array using jQuery or Angular 7

I have a series of checkboxes with values obtained from a loop. Instead of pushing these values into an array, I need to join them together as "parent1", "parent2", "parent3" and display the result in the console. Below is the code snippet for reference: ...

jqueryhtmlangular