I know that there are Questions here that covers parts of my Question but I can´t put them together to make my layout work.
So basically I want a two Column Layout with a fixed Sidebar and dynamic Content fill up the remaining space.
HTML:
<body>
<div id="navbar">
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3</li>
</ul>
</div>
<div id="content">
</div>
</body>
CSS:
html, body {
height:100%;
margin: 0;
padding: 0;
border: 0;
}
#content {
height:100%;
float:left;
/*margin: 0 0 0 200px;*/
}
#navbar{
height:100%;
width:200px;
float:left;
}
With this CSS I have the Problem that my content isn´t taking up the remaining Space, and if I remove the float I get a vertical scrollbar because there´s a margin on top!
Any suggestions how I can achieve 100% Height without scrollbar (no overflow hidden because that doesn´t remove the margin on top) and dynamic content width?
thanks in advance
EDIT:
Ironically it works with jsfiddle
http://jsfiddle.net/gXubX/2/
.container {
width: 100%;
background: fuchsia;
}
.left {
width: 200px;
float: left;
background: purple;
min-height: 300px;
}
And a clearfix applied to the container.
Here is a solution that gives you 100% height for both content and the navbar:
fiddle: http://jsfiddle.net/92c6M/
HTML
<div id="navbar">
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3</li>
</ul>
</div>
<div id="content">
</div>
CSS
html, body {
height:100%;
margin: 0;
padding: 0;
border: 0;
}
#content {
height:100%;
width: calc(100% - 200px);
display: inline-block;
background-color: #DDF;
}
#navbar{
height:100%;
width:200px;
float: left;
background-color: #CEC;
}
CSS:
#wrapper {
width: 100%;
float: left;
positon: relative;
}
#navbar {
width: 200px;
float: left;
top: 0px;
left: 0px;
position: absolute;
height: 300px;
background-color: red;
z-index: 2;
}
#content-wrapper {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 300px;
float: left;
background-color: blue;
z-index: 1;
}
#content {
left: 200px;
margin-left: 200px;
background-color: green;
z-index: 3;
color: white;
}
HTML
<div id="wrapper">
<div id="navbar"></div>
<div id="content-wrapper">
<div id="content">
asdfasfdasdfasdg asdga sdgasdg asdgasdgasdgasdg
</div>
</div>
</div>
Related
I have a sidebar & a navbar in my html file. That's all I have. I wanted to insert my content into the div main-content. But when I insert anything into the main-content div. It appears like this -
I want my content to appear on the empty space.
What I am using here.
<div class="wrapper">
<nav>
<div class="nav-wrapper">
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>
</nav>
<div class="sidebar">
<ul>
<li>...</li>
<li>
<ul>
<li>...</li>
</ul>
</li>
</ul>
</div>
<div class="main-content">
<!--Main Content Here-->
</div>
</div>
.sidebar{
padding-top: 84px;
position: fixed;
width: 223px;
height: 100%;
background: #333;
min-width: 120px;
transition: 0.5s ease-in;
}
.nav-wrapper{
background-color: white;
color: #222;
z-index: 9999;
}
I make style for your output so when you add the style in your code it will work like you want.
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
background: #f2f2f9;
}
.wrapper {
width: 100%;
display: inline-block;
}
.sidebar {
padding-top: 50px;
position: fixed;
width: 223px;
height: 100%;
background: #333;
min-width: 120px;
transition: 0.5s ease-in;
z-index: 1;
}
.nav-wrapper{
background-color: white;
color: #222;
}
nav {
z-index: 9999;
position: relative;
}
.main-content {
padding-left: 243px;
display: inline-block;
width: 100%;
padding-top: 15px;
}
</style>
I fixed my problem by shifting my sidebar into a main-container and then adding a padding of -100%. Then i made another division with class content and set its padding to 223px (the width of the sidebar) and adding padding further. If anyone has a better solution please answer!
Could you try as left the content as left & right? Find below a sample i tried
<div class="wrapper">
<nav>
<div class="nav-wrapper">
Nav Wrapper
</div>
<div class="wrapper-content">
<!--Main Content Here-->
Main Content
</div>
</nav>
<div class="sidebar">
SideBar
</div>
</div>
CSS
.nav-wrapper {
background-color: white;
color: #222;
z-index: 9999;
float: left;
margin-bottom: 84px;
}
.wrapper-content {
float: right;
}
I have a set of buttons which is a list with display: inline-block. Inside some of the buttons (li) there are div-s that may have some content, each is absolutely positioned below the parent li. The list is inside a div that has overflow-x: auto, because I don't know how many buttons there will be. However, the 'overflow-x: auto' creates a vertical scroll bar which I don't want and I have no idea why it's there. I thought that absolute elements are removed from the document flow?
Here is the snippet:
#links, #content {
width: 100%;
position: relative;
}
#links {
z-index: 1;
overflow-x: auto;
white-space: nowrap; }
#links li {
display: inline-block;
width: 100px;
height: 40px;
background: brown;
text-align: center;
color: #fff;
position: relative;
}
#links .link-content {
position: absolute;
top: 40px;
left: 0;
width: 100%;
height: 100%;
background: #66f;
}
#content {
z-index: 0;
background: #ccc;
height: 100px;
}
<div id="links">
<ul>
<li>Link 1<div class="link-content">Link Content</div>
</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
<div id="content">
</div>
, and this is what i want to achieve (i simply removed the 'overflow-x: auto' from '#links ul', but I need that in case there's more buttons than the space for them):
#links, #content {
width: 100%;
position: relative;
}
#links {
z-index: 1;
/*overflow-x: auto;*/
white-space: nowrap; }
#links li {
display: inline-block;
width: 100px;
height: 40px;
background: brown;
text-align: center;
color: #fff;
position: relative;
}
#links .link-content {
position: absolute;
top: 40px;
left: 0;
width: 100%;
height: 100%;
background: #66f;
}
#content {
z-index: 0;
background: #ccc;
height: 100px;
}
<div id="links">
<ul>
<li>Link 1<div class="link-content">Link Content</div>
</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
<div id="content">
</div>
I will then apply javaScript to hide/display the '.link-content' upon button click.
Thank you.
Your answer is in the example below.
The issue is "you are understanding position:absolute in a wrong manner. Position absolute only breaks the normal flow and now it moves according to its anchor element (with position: relative). But, it does not affect its height or width. When you are trying to compress pages or making a wrapper containing the whole structure, the height and width of element - (with position:absolute) is still an entity and on forcing and putting scroll (overflow:auto) that will absolutely be counted as a "legal HTML Element - with its height and width".
Normally you do not find this, because mostly position:absolute is used in menus, which are pretty small and not of that big size that they go out of page.
section {
overflow:auto;
height:110px;width:110px;
}
div {height: 100px;width:100px;background: red; position:relative;}
p {height: 200px; width: 200px;background: blue; position:absolute;left:5px;top:5px;}
<section>
<div>
<p></p>
</div>
</section>
<div>
<p></p>
</div>
I'm trying to build a responsive header component for a site. The header has position: fixed so that it doesn't scroll, but contains a horizontally scrolling list of options.
I used this tutorial to build the horizontally-scrolling internals so that the list of header items could be scrolled but no scrollbar would be displayed. Check out the code below, and see it working in this fiddle.
HTML
<body>
<main class="fixed-container">
<div class="scroll-container">
<ul class="scroll-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</main>
</body>
CSS
.fixed-container {
position: fixed;
height: 75px;
overflow: hidden;
right: 0;
left: 0;
border-bottom: 2px solid black;
}
.scroll-container {
height: 100%;
overflow-x: auto;
overflow-y: hidden;
box-sizing: content-box;
padding-bottom: 17px;
}
.scroll-list {
list-style: none;
display: flex;
height: 100%;
width: 1000px;
margin: 0;
padding-left: 0;
}
.scroll-list li {
flex: 1 0;
text-align: center;
padding-top: 2em;
border-bottom: 2px solid red;
margin-left: 5px;
margin-right: 5px;
}
<div class="scroll-container">, with height: 100%, fills the height of the <main class="fixed-container"> as expected. However the <ul> within the div, which also has height: 100%, does not fill the height of its parent. There is space between the red borders at the bottom of the <li>s within and the black border at the bottom of the <main class="fixed-container">.
Note that if overflow-x: auto and overflow-y: hidden are removed from <div class="scroll-container">, or if right: 0 is removed from <main class="fixed-container"> then the heights behave as expected and the red borders are flush with the top of the black border.
How can I get the <ul> to fit the height of its parent so that the red borders sit directly on top of the black border?
You can achieve the desired effect by changing the .scroll-container rule like this, where instead of setting a bottom padding, you increase its height
.scroll-container {
height: calc(100% + 17px);
overflow-x: auto;
overflow-y: hidden;
}
.fixed-container {
position: fixed;
height: 75px;
overflow: hidden;
right: 0;
left: 0;
border-bottom: 2px solid black;
}
.scroll-container {
height: calc(100% + 17px);
overflow-x: auto;
overflow-y: hidden;
}
.scroll-list {
list-style: none;
display: flex;
height: 100%;
width: 1000px;
margin: 0;
padding-left: 0;
}
.scroll-list li {
flex: 1 0;
text-align: center;
padding-top: 2em;
border-bottom: 2px solid red;
margin-left: 5px;
margin-right: 5px;
}
<main class="fixed-container">
<div class="scroll-container">
<ul class="scroll-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</main>
I've made a research before posting but I can't find anything to solve the problem.
I'm making a menu on my website, it has a width of 100% and inside the menu, I put 3 differents div.
Managed to make them take 100% of the width
.clear {
clear: both;
}
.menu {
position: relative;
height: 20%;
text-align: center;
}
.menu:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
background-image: url("images/triangles.svg");
width: 100%;
height: 100%;
opacity: 0.1;
z-index: -1;
}
.menu li {
float: left;
list-style: none;
margin-right: 5%;
}
.left,
.center,
.right {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: blue;
}
.left,
.right {
width: 30%;
}
.left {
left: 5%;
margin-right: 5%;
}
.right {
right: 5%;
}
.center {
width: 20%;
left: 40%;
}
<div class="menu">
<!--START-->
<div class="left">
<ul>
<li>Element 1
</li>
<li>Element 2
</li>
<li>Element 3
</li>
</ul>
</div>
<div class="center">
<h1>Title</h1>
<h3>Another Title</h3>
</div>
<div class="right">
<ul>
<li>Element 4
</li>
<li>Element 5
</li>
<li>Element 6
</li>
</ul>
</div>
<div class="clear"></div>
</div>
<!--END-->
My menu has an svg background but I don't think it's causing my issue. The problem is that inside .left and .right, the text-align doesn't works, but it does for the .center div.
At the beginning my three div was in float left but as I tought it was the problem, I tried positionning is with absolute positions, but style not working.
I apply a background color to visualise the width of my div and the text is not center at all, obviously a "text-align: right" doesn't work too and I don't understand because .center and .left/.right are basically the same, I can't figure out what's the difference between .center and the other div.
What's wrong in my code?
Because of the following styles
.menu li{float: left; list-style: none; margin-right: 5%;}
There is no space within which for you to see text-align have any effect on the text that you are referencing. This is because when you float those li they slim down to only the space required for their content.
That being so, it is most likely because of the padding and margin in your ul that you feel that text-align is the answer. See the following code
.right ul {margin: 0;padding:0;}
And the effect that it has:
.clear {
clear: both;
}
.menu {
position: relative;
height: 20%;
text-align: center;
}
.menu:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
background-image: url("images/triangles.svg");
width: 100%;
height: 100%;
opacity: 0.1;
z-index: -1;
}
.menu li {
float: left;
list-style: none;
margin-right: 5%;
}
.left,
.center,
.right {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: blue;
}
.left,
.right {
width: 30%;
text-align: left;
}
.left {
left: 5%;
margin-right: 5%;
}
.right {
right: 5%;
}
.center {
width: 20%;
left: 40%;
}
a {
color: white;
}
.right ul {
margin: 0;
padding: 0;
}
<div class="menu">
<!--START-->
<div class="left">
<ul>
<li>Element 1
</li>
<li>Element 2
</li>
<li>Element 3
</li>
</ul>
</div>
<div class="center">
<h1>Title</h1>
<h3>Another Title</h3>
</div>
<div class="right">
<ul>
<li>Element 4
</li>
<li>Element 5
</li>
<li>Element 6
</li>
</ul>
</div>
<div class="clear"></div>
</div>
<!--END-->
Depending on what exact layout you are trying to achieve, there are a lot of options on how to wield the power that CSS gives you here, but hopefully this is enough of a first step to lead you towards where you were hoping to get.
I'm trying to set up a simple layout for my homepage.
This is how I want it to look like:
Unfortunately, I've difficulties specifying the size for the main div. I want it to expand dynamically, both the height and the width. So it should "fill" the rest of the content, not filled by menu and footer.
HTML:
<body>
<div class="container">
<div class="nav">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div class="main">
Text...
</div>
<div class="footer">
Footer
</div>
</div>
</body>
CSS:
.nav, .content{
display: inline-block;
vertical-align: top;
}
.nav{
width: 200px;
background-color: #ccc;
}
.main{
height: 100%; /* something like 100% - 50px (height of footer) */
width: 100%; /* something like 100% - 200px (width of menu) */
overflow: hidden;
background-color: #aabbcc;
}
.footer{
background-color: #ff9999
}
You can find an example here: http://jsfiddle.net/48q5f4u9/3/
First at all reset:
* {margin:0;padding:0}
After use 100% on body, html tags and main container .container:
html,body, .container {
height:100%;
}
Then use calc() to set the dimensions, like:
.main{
height: calc(100% - 50px);
width: calc(100% - 200px);
overflow: hidden;
background-color: #aabbcc;
}
DemoFiddle
.nav{
width: 200px;
float: left;
background-color: #ccc;
}
Link to Fiddle
This is one simple way to make content dynamic , setting float to sidebar.
but i think you need to make more changes , set footer at bottom ( footer will be always at the end of the page ) and by this way you can make things look more attractive.
Hope this helps, let me know ;)
You can used sticky footer and absolute and border-box for main and nav and play with padding because they have a defined size:
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
.main, .nav {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
min-height: 100%;
margin-bottom: -50px;
overflow: hidden;
}
.nav {
position: absolute;
left: 0;
padding-bottom: 50px;
top: 0;
width:200px;
height: 100%;
background: #1abc9c;
z-index: 1;
}
.main {
top: 0;
width: 100%;
height: 100%;
padding: 0 0 50px 200px;
background: #3498db;
height: 100%;
position: absolute;
left: 0;
}
.container:after {
content: "";
display: block;
}
.footer, .container:after {
height: 50px;
}
.footer {
position: relative;
background-color: #e74c3c;
z-index: 2;
width: 100%;
}
<div class="container">
<div class="nav">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div class="main">
Text...
</div>
</div>
<div class="footer">
Footer
</div>