Related
I have an html like this:
<div class="container">
<div class="vertical-btns">
<button>Click</button>
<button>Click</button>
<button>Click</button>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</div>
With this css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
background-color: #71E764;
max-width: 50rem;
height: 100%;
overflow: auto;
max-height: 500px;
margin: auto;
}
.vertical-btns {
position: fixed;
padding-left: 20px;
width: inherit;
max-width: inherit;
flex: auto;
flex-direction: column;
display: flex;
right: 0;
}
The result is that I have a container with 3 fixed buttons but outside of it. What I need is that the buttons stays inside the container on top right. But in this way, with right: 0, it's not relate to the parent container, but it seems relates to the web page. Is there a way to fix this?
that's the codepen and as you can see the buttos are totally on the right of the page instead of the container: https://codepen.io/eryonn/pen/oNBbOwe
Try to use position: absolute; to position an element inside a parent with position: relative; and then position: fixed; on an element inside the absolute positioned
Instead of right: 0; for the element .vertical-btns use
margin-left: min(50rem, 100%);
transform: translateX(-100%);
Why margin-left: min(50rem, 100%)?
That's because your wrapper has not a fixed width, but just a max-width. So when the viewport is smaller than 50rem it becomes responsive so also the margin-left must be lower, accordingly. More information about the CSS min() function can be found on MDN
Note 1: if you're using a CSS preprocessor an error could be raised while compiling the source, probably because the preprocessor already has a min() function. If you want to use the CSS function instead change the case of the letters (e.g Min(...)) since the css function are case-insensitive
Note 2: if your browser doesn't support the min() function in this case you could use a mediaquery which will do the same thing (just a bit more verbose), e.g.
.vertical-btns { margin-left: 100% }
#media (min-width: 50rem) {
.vertical-btns { margin-left: 50rem }
}
Result
"position: fixed" removes the element from the normal flow of the page and positions it in relation to the viewport. You can use "position: sticky" with "top:0" which will make your element stick to the top even when scrolling. Here's the code sample.
.vertical-btns {
position: sticky;
padding-left: 20px;
width: 100%;
flex: auto;
flex-direction: column;
display: flex;
align-items:flex-end;
top:0;
height:0;
}
Just use position: absoulte instead of position: fixed and you can position your buttons relative to the container wherever you want ;-)
Position fixed is allways relative to viewport. Position àbsouteis allways relative to the notstatic`positioned parent element.
See example:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
background-color: #71E764;
max-width: 50rem;
height: 100%;
overflow: auto;
max-height: 500px;
margin: auto;
}
.vertical-btns {
position: absolute;
top: 0;
right: 0;
padding-left: 20px;
width: inherit;
}
<div class="container">
<div class="vertical-btns">
<button>Click</button>
<button>Click</button>
<button>Click</button>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</div>
Note: Updated the code to comments.
I can't figure out what's blocking here, or if it's just not possible. I wanted to put together what seemed like a simple design, right aligned sidebar with the content of the sidebar aligned in the bottom, the main content flowing freely but not going underneath the sidebar, yet I can't get it right. This is as close as I can get it, but I can't get the background to run along the whole height.
.main_box {
width: calc(100% - 300px);
float:left;
background-color: green;
}
.side_panel {
float: right;
height: 100%;
background-color: blue;
}
.bottom_nav {
background-color: red;
width: 300px;
position: fixed;
right: 0;
bottom: 0;
}
<div class="main_box">
<div class="side_panel">
<div class="bottom_nav">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla posuere, nibh convallis tristique imperdiet, risus enim blandit felis, a semper mi arcu sit amet purus. Aliquam urna quam, venenatis et ligula ac, vestibulum efficitur diam. Integer vitae metus ac tellus consequat condimentum. Cras iaculis augue eget faucibus vehicula. Etiam facilisis metus ac sapien rutrum placerat. Nulla nibh enim, tincidunt ac suscipit vestibulum, tincidunt ac magna. Integer vestibulum, ligula sed accumsan faucibus, enim velit congue lorem, eget consequat eros est nec enim. Vestibulum ac gravida purus. Sed non rhoncus ante. Sed facilisis eros at risus feugiat laoreet. Aliquam imperdiet justo non velit luctus finibus. Proin eget finibus nulla, in congue nulla. Proin eget enim eget lorem tincidunt pellentesque. Suspendisse potenti. Morbi lacinia vehicula lacus id efficitur. Nunc fringilla libero augue, sed iaculis lorem efficitur nec.</p>
<p>Sed vel feugiat enim, at bibendum ex. Mauris id commodo arcu, nec lacinia nulla. Donec rhoncus ex quis urna suscipit condimentum. Suspendisse ante purus, vulputate a lectus efficitur, bibendum dignissim ante. Aliquam nec mollis sapien, placerat hendrerit nisi. Nam at tempus nisl. Donec accumsan augue non mauris varius, eu accumsan neque ullamcorper. Aliquam mollis, orci at varius euismod, urna eros pulvinar massa, sit amet viverra nunc arcu a tortor. Nunc pulvinar non erat vel volutpat. Donec eu blandit arcu. Vivamus bibendum dolor arcu, ut fringilla ex tincidunt nec. Sed id placerat tortor. Curabitur non tellus sagittis, sodales est vitae, blandit justo.</p>
</div>
when using a position:fixed the element you will get removed from the normal flow making its parent element empty like it doesn't exist.
Consider the parent element to be fixed then place the content inside at the bottom:
.main_box {
width: calc(100% - 300px);
float: left;
background-color: green;
}
.side_panel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 300px;
background-color: blue;
}
.bottom_nav {
background-color: red;
position: absolute;
right: 0;
bottom: 0;
width:100%;
}
body {
margin:0;
}
<div class="main_box">
<div class="side_panel">
<div class="bottom_nav">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla posuere, nibh convallis tristique imperdiet, risus enim blandit felis, a semper mi arcu sit amet purus. Aliquam urna quam, venenatis et ligula ac, vestibulum efficitur diam. Integer vitae
metus ac tellus consequat condimentum. Cras iaculis augue eget faucibus vehicula. Etiam facilisis metus ac sapien rutrum placerat. Nulla nibh enim, tincidunt ac suscipit vestibulum, tincidunt ac magna. Integer vestibulum, ligula sed accumsan faucibus,
enim velit congue lorem, eget consequat eros est nec enim. Vestibulum ac gravida purus. Sed non rhoncus ante. Sed facilisis eros at risus feugiat laoreet. Aliquam imperdiet justo non velit luctus finibus. Proin eget finibus nulla, in congue nulla.
Proin eget enim eget lorem tincidunt pellentesque. Suspendisse potenti. Morbi lacinia vehicula lacus id efficitur. Nunc fringilla libero augue, sed iaculis lorem efficitur nec.</p>
<p>Sed vel feugiat enim, at bibendum ex. Mauris id commodo arcu, nec lacinia nulla. Donec rhoncus ex quis urna suscipit condimentum. Suspendisse ante purus, vulputate a lectus efficitur, bibendum dignissim ante. Aliquam nec mollis sapien, placerat hendrerit
nisi. Nam at tempus nisl. Donec accumsan augue non mauris varius, eu accumsan neque ullamcorper. Aliquam mollis, orci at varius euismod, urna eros pulvinar massa, sit amet viverra nunc arcu a tortor. Nunc pulvinar non erat vel volutpat. Donec eu blandit
arcu. Vivamus bibendum dolor arcu, ut fringilla ex tincidunt nec. Sed id placerat tortor. Curabitur non tellus sagittis, sodales est vitae, blandit justo.</p>
</div>
I made a page to practice using flexbox. It has 1 container in red with 3 flex items. When I minimize the screen the items drop below each other but do not use up the full width of container.
How can I achieve this?
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: stretch;
margin: 40px;
background-color: red;
}
.col {
max-width: 400px;
}
.one,
.two-a,
.two-b,
.three {
background-color: black;
color: white;
padding: 20px;
margin: 1rem;
}
h2,
h3 {
font-family: arial;
}
h2 {
margin-left: 2rem;
}
<div class="container">
<!-- <h2>Flexbox</h2> -->
<div class="one col">
<h3>Step 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget dui ut justo auctor semper a ullamcorper justo. Morbi placerat tortor tortor, ac dignissim leo semper ac. Donec non metus sit amet neque eleifend rhoncus vitae id dolor. Etiam vestibulum
lobortis sem semper laoreet. Vestibulum egestas elit sed lacus egestas, placerat congue erat faucibus. Nunc ac dui auctor, fermentum turpis ac, mattis magna. Nulla pellentesque, ligula vel faucibus imperdiet, arcu ligula ornare quam, et blandit
risus sem sit amet neque. Curabitur commodo dui et metus suscipit, ut dignissim risus hendrerit. Quisque at odio nec risus condimentum ullamcorper. Nulla sit amet felis sit amet neque aliquet auctor sed nec metus. Sed gravida mattis sem, nec finibus
diam suscipit sit amet.</p>
</div>
<div class="two col">
<div class="two-a">
<h3>Step 2a</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget dui ut justo auctor semper a ullamcorper justo. Morbi placerat tortor tortor, ac dignissim leo semper ac. Donec non metus sit amet neque eleifend rhoncus vitae id dolor. Etiam
vestibulum lobortis sem semper laoreet. Vestibulum egestas elit sed lacus egestas, placerat congue erat faucibus. Nunc ac dui auctor, fermentum turpis ac, mattis magna. Nulla pellentesque, ligula vel faucibus imperdiet, arcu ligula ornare quam,
et blandit risus sem sit amet neque. Curabitur commodo dui et metus suscipit, ut dignissim risus hendrerit. Quisque at odio nec risus condimentum ullamcorper. Nulla sit amet felis sit amet neque aliquet auctor sed nec metus. Sed gravida mattis
sem, nec finibus diam suscipit sit amet.</p>
</div>
<div class="two-b">
<h3>Step 2b</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget dui ut justo auctor semper a ullamcorper justo. Morbi placerat tortor tortor, ac dignissim leo semper ac. Donec non metus sit amet neque eleifend rhoncus vitae id dolor. Etiam
vestibulum lobortis sem semper laoreet. Vestibulum egestas elit sed lacus egestas, placerat congue erat faucibus. Nunc ac dui auctor, fermentum turpis ac, mattis magna. Nulla pellentesque, ligula vel faucibus imperdiet, arcu ligula ornare quam,
et blandit risus sem sit amet neque. Curabitur commodo dui et metus suscipit, ut dignissim risus hendrerit. Quisque at odio nec risus condimentum ullamcorper. Nulla sit amet felis sit amet neque aliquet auctor sed nec metus. Sed gravida mattis
sem, nec finibus diam suscipit sit amet.</p>
</div>
</div>
<div class="three col">
<h3>Step 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget dui ut justo auctor semper a ullamcorper justo. Morbi placerat tortor tortor, ac dignissim leo semper ac. Donec non metus sit amet neque eleifend rhoncus vitae id dolor. Etiam vestibulum
lobortis sem semper laoreet. Vestibulum egestas elit sed lacus egestas, placerat congue erat faucibus. Nunc ac dui auctor, fermentum turpis ac, mattis magna. Nulla pellentesque, ligula vel faucibus imperdiet, arcu ligula ornare quam, et blandit
risus sem sit amet neque. Curabitur commodo dui et metus suscipit, ut dignissim risus hendrerit. Quisque at odio nec risus condimentum ullamcorper. Nulla sit amet felis sit amet neque aliquet auctor sed nec metus. Sed gravida mattis sem, nec finibus
diam suscipit sit amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget dui ut justo auctor semper a ullamcorper justo. Morbi placerat tortor tortor, ac dignissim leo semper ac. Donec non metus sit amet neque eleifend rhoncus vitae id dolor. Etiam vestibulum
lobortis sem semper laoreet. Vestibulum egestas elit sed lacus egestas, placerat congue erat faucibus. Nunc ac dui auctor, fermentum turpis ac, mattis magna. Nulla pellentesque, ligula vel faucibus imperdiet, arcu ligula ornare quam, et blandit
risus sem sit amet neque. Curabitur commodo dui et metus suscipit, ut dignissim risus hendrerit. Quisque at odio nec risus condimentum ullamcorper. Nulla sit amet felis sit amet neque aliquet auctor sed nec metus. Sed gravida mattis sem, nec finibus
diam suscipit sit amet.</p>
</div>
</div>
https://codepen.io/cian-w/pen/EQZmRz
You have a rule limiting the width of flex items:
.col {
max-width: 400px;
}
Therefore, the items cannot fill the full width of the container because they cannot expand beyond 400px. Try this instead:
.col {
flex: 1 0 400px;
}
This shorthand declaration breaks down to:
flex-grow: 1
flex-shrink: 0
flex-basis: 400px
revised codepen
I'm trying to build a website template where the main #content div is 75% the width of the screen, and centered on the page, but I also want to occasionally have sections that span the full width of the viewport. The way I've accomplished this is by applying a class of .full-width on these sections that overrides the margins of the #content div by setting the width to 100vw, as well as some other properties that you can see in the CSS below.
The problem is that, when enough content is on the page that vertical scrollbars appear, the width of the scrollbars is included in the calculation of the viewport width, so content gets hidden behind the scrollbars.
Is there a way around this problem, or a completely different and better way to do what I'm trying to accomplish?
#content {
width: 75%;
margin: 0 auto;
}
.full-width {
width: 100vw;
position: relative;
left: calc(-50vw + 50%);
box-sizing: border-box;
}
.full-width img {
width: 100%;
}
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus.
Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis.
Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
<div class="full-width">
<img src="http://toprival.com/temp/test-image.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla
dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit
lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus.
Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis.
Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
</div>
<!-- content -->
You can have the full-width by default and when for #content > p use width: 75% (Now you won't need to set vw, the width will auto-adjust)
Note that setting width 75% for the whole #content and then having full-width divs in between makes things needlessly complex - though hacky solutions using negative margins and positioning can be done.
See demo below:
#content > p{
width: 75%;
margin: 0 auto;
}
.full-width {
width: 100%;
box-sizing: border-box;
}
.full-width img {
width: 100%;
}
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus.
Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis.
Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
<div class="full-width">
<img src="http://toprival.com/temp/test-image.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla
dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit
lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus.
Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis.
Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
</div>
<!-- content -->
I'm trying to create a sidebar that rests next to the content div but it sits below the content div, it's at the right x position just not the right y.
HTML:
<body>
<div id="framediv">
<div id="headerdiv">
</div>
<div id="content" class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla adipiscing velit, a pharetra sem dictum vel. Aliquam varius porta est, vitae pulvinar nunc adipiscing in. Maecenas sem eros, gravida nec blandit vel, aliquam at dui. Aliquam ante est, lacinia id laoreet ac, convallis ac magna. Maecenas rhoncus ligula vitae mauris volutpat sed dapibus lectus fringilla. Nam orci metus, molestie eu placerat sit amet, faucibus in libero. Nunc tristique, elit vitae tincidunt rutrum, odio erat blandit nibh, eu facilisis sapien dolor rhoncus risus. Ut eu velit lectus. Sed vitae nisl orci. Nulla vel nisl ante. Donec sit amet nulla eget massa euismod ultrices vitae at nisi. Donec tempor justo auctor libero dapibus viverra. Cras commodo fermentum nisi. Maecenas porttitor euismod metus lacinia sodales. Aliquam egestas ligula purus, id sollicitudin risus. Nullam vel odio et libero viverra blandit vel et dolor.
Nullam mauris dui, consequat a placerat eu, semper non mi. Nam in leo vel lorem adipiscing commodo. Duis vestibulum erat vel felis tincidunt in congue ipsum rutrum. Sed in ipsum ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra nisi eget arcu malesuada at dapibus elit varius. Morbi sodales, justo fermentum lobortis elementum, orci turpis vehicula nisl, quis laoreet sapien libero a leo. Aenean ac arcu augue, vitae pellentesque ipsum. Ut nec mauris at nisl luctus tempor a sed turpis. Pellentesque in odio libero, sit amet tincidunt nisl. Duis dictum tortor vitae sem sagittis in molestie nisl interdum. Maecenas mollis adipiscing augue, eget accumsan justo ultrices a. Suspendisse scelerisque justo et nisl consectetur a varius lacus sodales. Duis accumsan iaculis nulla, non pretium metus venenatis et. Sed gravida elementum ipsum sed aliquet.
Vestibulum tincidunt pulvinar aliquet. Nullam bibendum vulputate diam quis mattis. Etiam mollis dui eu quam feugiat pharetra. Donec non tempus eros. Fusce eleifend magna eu lorem imperdiet bibendum rhoncus eget odio. Etiam adipiscing nibh sit amet augue elementum tempus. Etiam hendrerit massa a augue laoreet vitae pretium enim aliquet. Mauris malesuada lorem vitae neque pretium convallis. Sed condimentum semper ipsum, consectetur imperdiet eros interdum eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec adipiscing nisi in erat feugiat tempor. Nunc tincidunt neque non nisl tristique quis ornare elit ornare.
Praesent nec augue ligula, quis iaculis diam. Nam eget felis est, eget pellentesque lectus. Ut suscipit varius magna, ac vestibulum risus egestas ac. Quisque id sapien sed leo luctus faucibus in non leo. Integer sit amet pellentesque velit. Vivamus convallis, lacus nec tincidunt viverra, nunc velit aliquam nisi, eu pretium tellus nisl eget eros. Etiam dolor leo, feugiat vel faucibus ac, ullamcorper quis turpis. Mauris nec felis elit. Donec dignissim ullamcorper arcu. Proin tempor, dui vel malesuada viverra, lacus mauris ullamcorper lacus, eu convallis dolor justo non massa. Maecenas volutpat, leo gravida eleifend pharetra, dolor mauris tempor odio, quis facilisis tellus nisl quis sapien. Donec quam mauris, malesuada id iaculis ut, pellentesque non mauris. Nullam interdum justo id nunc tempor sed consequat quam venenatis.
Curabitur ipsum augue, posuere at adipiscing nec, rutrum in nisi. Ut mattis placerat est aliquam vulputate. Nullam faucibus, libero in facilisis auctor, lectus metus suscipit ligula, quis sollicitudin ligula erat sit amet nisi. Suspendisse et suscipit lectus. Sed fermentum porta lorem, vel congue tortor sollicitudin molestie. Nulla imperdiet purus non velit ornare vestibulum id at massa. Curabitur lorem urna, fermentum ut suscipit sed, pretium sed ante. Nullam ligula ante, aliquam at blandit ac, aliquam in velit. Cras nisl libero, iaculis at rutrum ac, mollis nec tortor. Aenean dignissim viverra molestie. Vivamus ultricies sem purus, tempor pharetra elit. Sed placerat est at turpis eleifend accumsan. Cras metus ante, imperdiet et suscipit ut, interdum eget est. In rutrum imperdiet mi in consectetur.
</div>
<div id="sidebar" align="center" class="container">
<p>dvsdvs</p>
</div>
</div>
</body>
CSS:
#menudiv{
display:inline-block;
float:none;
padding-bottom:20px;
}
#html, body {
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width:980px;
height: 100%;
margin: auto;
}
#headerdiv{
width:950px;
-webkit-box-shadow:10px 10px 20px #000;
-moz-box-shadow:10px 10px 20px #000;
}
#content.container{
height:100%;
width: 640px;
padding-top:50;
margin-top:50;
padding-left: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
border:thin;
border-color:#CCC;
border-style:solid;
-webkit-box-shadow:10px 10px 20px #000;
-moz-box-shadow:10px 10px 20px #000;
}
#sidebar{
position:absolute
float:left;
float:right;
top:250px;
height:100%;
width: 280px;
border:thin;
border-color:#CCC;
border-style:solid;
-webkit-box-shadow:10px 10px 20px #000;
-moz-box-shadow:10px 10px 20px #000;
}
Here #html, body you don't need the '#' in front of html. On #sidebar you have
float:left;
float:right;
... don't think you any of it since you're positioning it absolute.
JSFiddle would be helpful as well.
Wrap your content with DIV
<div id="content" class="container">
<div id="maincontent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla adipiscing
velit, a pharetr
</div>
<div id="sidebar" align="center" class="container">
<p>dvsdvs</p>
</div>
</div>
.container#maincontent {float:left: width:75%} //75% minus paddings minus margins minus borders
.container#sidebar {float:right; width:25%} //25% minus paddings minus margins minus borders
Your question seems a bit contradictory... as does a bit of your code.
If you simply want the sidebar to fall along the right side of the content div, then you could move your sidebar div, in the code, above the content div and assign it a "float: right".
If by "but it sits below the content div" you're referring to the code as opposed to the visual layout, then you can float the content div to the left and remove float on the sidebar (or float: right).
I also noticed that in your #sidebar css you're declaring conflicting floats for both left AND right.
Include float in your container as well.