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

AngularJS: Showcase HTML code within ng-view along with its corresponding output displayed in a navigation format such as Html, Css, JS, and Result

Z-index creates an obstacle that prevents items from being clicked on

When I include scroll-snap-type: y; in the body tag, the scroll-snapping feature does not function properly

Scroll down 1 page using Javascript and Jquery

ASP.NET MVC does not automatically refresh when changes are made to the CSS file

Emails are not responsive to media queries

What is the best way to create a fixed positioning for a div within a Material-UI table container?

Creating an overlay button within various containing divs requires setting the position of the button

Tips on how to make a <li> element float independently without impacting other elements on the page

bootstrap3 container alignment

Trick for hiding CSS elements when input field is vacant

Step-by-step guide on positioning an image to show at the bottom of a div

Animation of CSS with an image depicting a leaf swaying gently in the breeze

When using React <p> and Tailwind, the text overflow occurs in either the X or Y axis, despite specifying Y specifically

Managing the height of a hero section with TailwindCSS and React.js

Maintaining hover effects even when elements are not in view

Getting rid of the excess white space below the footer caused by concealed elements

Center align the division within the list item

Creating an Android application that integrates HTML styling efficiently

Create a full-width slider using Materialize CSS framework