css side by side with immovable element

Question

css side by side with immovable element

Seeking assistance with CSS.

I am looking to create a layout as follows:

I want a center-fixed menu with a width of 960px - this part is straightforward.

Alongside the menu, I aim to have two divs: one spanning from the left edge of the screen to the closest point of the centered div from the middle, and another from the next point after the centered div to the right edge of the screen.

Here's a visual representation:

The fluidity of the left and right divs will be dependent on the screen resolution.

If anyone can offer guidance or assistance, it would be greatly appreciated. Thank you.

css

Answer 1

Answer №1

one way to style your webpage is with css, like this:

#fixed{
    margin:0 px auto;
    width: 960px;
}    
#container {
    padding-left: 205px;      /* LC fullwidth */
    padding-right: 205px;     /* RC fullwidth + CC padding */
    background:#FFFF99;
}

 #container .column {
    position: relative;
        float: left;
    }

    #center {
        padding: 20px 0px 20px 0px;       /* CC padding */
        width: 100%;
        height:auto;
    }
    #content{padding:10px;height:auto;border-right:1px dashed;color:#fed88e;}

    #right{
        width: 205px;             /* RC width */
        padding: 0px;          /* RC padding */
        margin-right: -100%;
    }
#left{
 width : 205px;
padding: 0px
margin-left:-100%;

}

when it comes to the html structure, you can use code like this:

<div id="fixed">
<div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
</div>

Answer 2

one way to style your webpage is with css, like this:

#fixed{
    margin:0 px auto;
    width: 960px;
}    
#container {
    padding-left: 205px;      /* LC fullwidth */
    padding-right: 205px;     /* RC fullwidth + CC padding */
    background:#FFFF99;
}

 #container .column {
    position: relative;
        float: left;
    }

    #center {
        padding: 20px 0px 20px 0px;       /* CC padding */
        width: 100%;
        height:auto;
    }
    #content{padding:10px;height:auto;border-right:1px dashed;color:#fed88e;}

    #right{
        width: 205px;             /* RC width */
        padding: 0px;          /* RC padding */
        margin-right: -100%;
    }
#left{
 width : 205px;
padding: 0px
margin-left:-100%;

}

when it comes to the html structure, you can use code like this:

<div id="fixed">
<div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
</div>

Answer 3

Answer №2

After exploring various ideas that didn't work out, the final solution was found:

http://jsfiddle.net/kC35U/4/

The HTML code with additional markup:

<div id="bar">
  <div class="left"><div>LEFT</div></div>
  <div class="right"><div>RIGHT</div></div>
  <div class="center">CENTER</div>
</div>
<div>
  Footer
</div>

CSS styling:

The center div has a fixed width and is centered without any special effects:

.center {
    width: 500px;
    margin: 0 auto;
}

To create two wrapper divs for the left and right columns each occupying 50% of the width:

.left {
    width: 50%;
    margin-right: auto;
    height: 0;
}

.right {
    width: 50%;
    margin-left: auto;
    height: 0;
}

The internal divs fill their parent container but we cut off half the width of the center div:

.left > div {
    margin-right: 250px;
}

.right > div {
    margin-left: 250px;
}

If you need to add content below the three columns, some unconventional techniques are required:

.left:after, .right:after {
  content: '';
  float: left;
  height: 0;
}

#bar + * {
    clear: both;
}

Answer 4

After exploring various ideas that didn't work out, the final solution was found:

http://jsfiddle.net/kC35U/4/

The HTML code with additional markup:

<div id="bar">
  <div class="left"><div>LEFT</div></div>
  <div class="right"><div>RIGHT</div></div>
  <div class="center">CENTER</div>
</div>
<div>
  Footer
</div>

CSS styling:

The center div has a fixed width and is centered without any special effects:

.center {
    width: 500px;
    margin: 0 auto;
}

To create two wrapper divs for the left and right columns each occupying 50% of the width:

.left {
    width: 50%;
    margin-right: auto;
    height: 0;
}

.right {
    width: 50%;
    margin-left: auto;
    height: 0;
}

The internal divs fill their parent container but we cut off half the width of the center div:

.left > div {
    margin-right: 250px;
}

.right > div {
    margin-left: 250px;
}

If you need to add content below the three columns, some unconventional techniques are required:

.left:after, .right:after {
  content: '';
  float: left;
  height: 0;
}

#bar + * {
    clear: both;
}

Answer 5

Answer №3

If you're looking to achieve your desired layout, I recommend checking out the following solution:

The Holy Grail 3 column liquid layout

All you have to do is include this code snippet:

#col1 {
    margin: 0 auto;
    width: 960px;
}

You may require some extra adjustments for perfect results.

Answer 6

If you're looking to achieve your desired layout, I recommend checking out the following solution:

The Holy Grail 3 column liquid layout

All you have to do is include this code snippet:

#col1 {
    margin: 0 auto;
    width: 960px;
}

You may require some extra adjustments for perfect results.

css side by side with immovable element

Answer №1

Answer №2

Answer №3

Similar questions

What is the process of uploading a video and showcasing it on an HTML page?

In need of assistance with adding a divider within a box using HTML/CSS

Div controls the margins of all other elements

Tips for aligning words on a single line

Positioning Images with CSS Backgrounds

The Bootstrap 4 dropdown seems to have a one-time use limit

The height of divs spontaneously changes after resizing without any instructions

Customize Material UI components by incorporating SASS classes

Angular Material Popup - Interactive Map from AGM

Is there a way to have the collapsible content automatically expanded upon loading?

Designing personalized sass components

How can CSS be used to create a responsive form script?

Is there a way to stop text from wrapping between words and punctuation marks using CSS or jQuery?

Tips for customizing bootstrap's fixed navbar-default to ensure that the list items align downwards:

Using a global CSS file in Angular can lead to large module bundles being emitted by Webpack

Employing JavaScript to display or conceal a <div> element while scrolling

Calculate the percentage of a specific side for the border-radius using a single radius

json - {"response":{"messageTitle":"Message Delivered"}}

Issue with z-index causing the image to not display when navigating through an image gallery with previous and next buttons using

React Transition for Mui Menu