first comes the content in the two column layout

Question

first comes the content in the two column layout

HTML:

<div id="main">
    <div id="content"></div>    
    <div id="sidebar"></div>        
</div>

CSS:

#content {
    background: blue;
    height: 900px;
    width: calc(100% - 200px);
}

#sidebar {
    float: right;
    width: 200px;
    height: 900px;
    background: red;
}

JSFIDDLE: http://jsfiddle.net/aFrPc/

To achieve the desired layout, I have rearranged the order of the div elements in the HTML code. The #content now comes before #sidebar and has been set to fill all remaining space using the CSS property 'width: calc(100% - 200px);'.

Image of final wanted result:

css layout html multiple-columns

Answer 1

Answer №1

UPDATED In order to display the content text before the sidenav text, follow this structure: Fiddle


    <div id="main">
        <div id="content">
            <div style="padding-left:200px">
                Context
            </div>
        </div>        
        <div id="sidebar">sidebar</div>    
    </div><!--#main-->

    #content {
        background: blue;
        height: 900px;
        width:100%;
        margin-left:-200px;
        float:right;
        color:#fff;
    }

    #sidebar {
        float: left;
        width: 200px;
        height: 900px;
        background: red;
    }

Answer 2

UPDATED In order to display the content text before the sidenav text, follow this structure: Fiddle


    <div id="main">
        <div id="content">
            <div style="padding-left:200px">
                Context
            </div>
        </div>        
        <div id="sidebar">sidebar</div>    
    </div><!--#main-->

    #content {
        background: blue;
        height: 900px;
        width:100%;
        margin-left:-200px;
        float:right;
        color:#fff;
    }

    #sidebar {
        float: left;
        width: 200px;
        height: 900px;
        background: red;
    }

Answer 3

Answer №2

If you want the content to be displayed first and take up all available space after a 200px sidebar, try this method:

body{
  overflow-x:hidden;
}
#content {
  background: blue;
  height: 900px;
  position:absolute;
  width:100%;
  left:200px;
}

#sidebar {
  float: left;
  width: 200px;
  height: 900px;
  background: red
}

You can check out the code in action on Jsfiddle: http://jsfiddle.net/VkQ6U/

Answer 4

If you want the content to be displayed first and take up all available space after a 200px sidebar, try this method:

body{
  overflow-x:hidden;
}
#content {
  background: blue;
  height: 900px;
  position:absolute;
  width:100%;
  left:200px;
}

#sidebar {
  float: left;
  width: 200px;
  height: 900px;
  background: red
}

You can check out the code in action on Jsfiddle: http://jsfiddle.net/VkQ6U/

first comes the content in the two column layout

Answer №1

Answer №2

Similar questions

Protect the digital art piece on Canvas by utilizing Codeigniter framework

What is the secret behind the functionality of this Jquery dark mode code?

Where to position a button in the middle of a div that varies in size

Tips on adjusting video to the screen size

Scroll elements to the left and display the element on the far right

Creating alternate blocks of even and odd numbers using a while loop with an odd number as the starting point. Man

How to use a jQuery each loop to retrieve the margin of an element

What is the best way to modify this CSS code for use in a React Native

How can one properly utilize material-ui CSS?

What could be causing my image to fail to load on Firefox while successfully loading on Safari and Chrome?

Troubleshooting Problem with Button Image Display in CSS

Executing a PHP function through an HTML button click while maintaining the current page state without

Enabling and disabling multiple input fields based on the status of a checkbox in order to manage dynamic inputs

Issue with Line 126: Syntax Error Unexpected End - Troubleshooting Required

Spacing is missing between Months and Years in the Bootstrap Datepicker

Highlight particular words within a string by assigning them specific colors

Exploring Anchor Tags in Next.js

How can I place two divs side by side with borders in Bootstrap 3?

Responsive design challenge

How to Generate HTML Reports Using JBoss?