I'm having trouble making a page that has multiple divs aligned horizontally, each sized 100% by 100%, so the page scrolls horizontally.
The ultimate goal will be a horizontal smooth scroll between the divs. I'm not entirely sure where to start. Does anyone have any suggestions?
What about something similar to this? Just adjust the height and width of each based on the number of horizontal divs.
JFiddle Example
CSS
html, body {
width: 200%;
height: 100%;
margin: 0px;
}
#firstDiv {
float: left;
width: 50%;
height: 100%;
background-color: red;
}
#secondDiv {
float: left;
width: 50%;
height: 100%;
background-color: blue;
}
HTML
<div id="firstDiv"></div>
<div id="secondDiv"></div>
Related
So lets imagine I have 6 div elements with different content.
3 divs are header
1 div is main container (scrollable)
last 2 divs are footer
How to make all of this scallable just with pure css? Because now when I'm resizing my browser my footer divs are just disappearing and I can't reach them and when I make my browser even smaller my main container div is cut in half (lower part disappears) and header divs height gets smaller
The best scenario would be to make header and footer divs somehow fixed height(don't know how) and main container to resize on broswer is resized.
html
<div ng-controller="ListController">
<div class="header">
</div>
<div class="price_found">
</div>
<div class="settings">
</div>
<div class="main_container antiscroll-wrap">
<div class="container antiscroll-inner">
</div>
</div>
<div class="total_select">
</div>
<div class="menu_footer">
</div>
</div>
scss
.cheap-watcher { //this is main container properties in which everything is injected
position: fixed;
top: 0px;
right: 0px;
width: 360px;
height: 100%;
max-width: 360px;
max-height: 100%;
min-height: 100%;
background-color: #f1f3f4;
float: right;
.header {
height: 7.57%;
background-color: #00a8e8;
}
.price_found {
padding-top: 16px;
height: 10.169%;
background-color: #fff;
text-align: center;
}
.settings {
height: 4.971%;
width: 100%;
display: inline-block;
}
.main_container {
width: 360px;
background-color: #fff;
.container {
width: 360px;
height: 57.856%;
}
}
.total_select {
height: 7.57%;
width: 100%;
background-color: #fff;
text-align: center;
border-top: solid;
border-top-color: #e8e8e8;
border-top-width: 2px;
}
.menu_footer {
height: 11.864%;
width: 100%;
}
}
You can assign to all of your containers a min-height for example in px or vh. Min. Height means that the container will always have that minimum height but will grow as more content comes in. For your main container you obviously want a fixed height, so use normal height and use also px or vh and overflow so if you have more content then the height allows, the main container becomes scrollable.
See a working Fiddle
Hope this helps you a bit.
I'm having some strange behavior of the percentages.
I have layout which is 1366 pixels wide and I have one div which should be fluid.
Its 200px wide, which means it should be 14.64% wide.
When the layout is tested in 1366 pixels the div looks fine and there are no problems, but when I expand to 1920 the div is not wide enough.
Here is some samples of the code:
HTML:
<header>
<div class="top-bar">
<div class="fill"></div>
<div class="container">
<nav>
</nav>
</div>
</div>
<div class="bottom-bar">
</div>
</header>
And CSS
.container{
width: 1004px;
margin: 0px auto 0px auto;
}
header{
width: 100%;
height: 95px;
}
header div.top-bar{
background: #ffffff;
width: 100%;
height: 50px;
}
header div.fill{
background: #000000;
width: 14.64%;
height: 50px;
float: left;
}
nav{
height: 50px;
float: left;
}
header.main div.bottom-bar{
background: url("header-bottom.png") repeat-x;
width: 100%;
height: 45px;
}
I've coded liquid designs before, but never had problem like this, maybe my math is wrong or the problem is that everything else is hardcoded in pixels and this is liquid?
I'd guess the problem is because container has a pixel size while fill is in percentage. If all you want to achieve with the fill is to put a background color around container, you can do something like this (and remove the fill class css)
.container{
width: 1004px;
margin: 0px auto 0px auto;
background: #ffffff;
}
header div.top-bar{
width: 100%;
height: 50px;
background: #000000;
}
Now if you want to color only left side, and want to fit your 'fill' div nicely, then both container and fill have be either in percentage or in pixels (won't work properly in different screen sizes). There are different workarounds to make your fill work e.g. the following
header div.fill {
background: #000000;
width: 50%; /*make it wide enough*/
height: 50px;
float: left;
z-index: -1; /*put it behind container*/
position: relative;
}
header div.top-bar{
background: #ffffff;
width: 100%;
height: 50px;
z-index: -2; /*put it behind all*/
position: relative;
}
for managment layout use grid system css famework for example
Bootstrap
http://getbootstrap.com/
or
960 grid system
http://960.gs/
I'm having an issue with a fluid sidebar and a content box next to it.
I designed my left #sidebar to my liking, but not I'm having trouble making a content box that fills up the remaining space next to it.
I'd like to have the whole project take up 100% of the page width. The problem is coming from the min/max widths on my sidebar.
Been goin' hard on this all day and still having problems, void space between, overlapping ,ect.
http://jsfiddle.net/DrDavidBowman01/PjLgE/
CSS
#container {
width: 100%;
display: block;
height: 100%;
}
#sidebar {
display: block;
width: 22%;
float:left;
min-width: 236px;
max-width: 332px;
height: 100%;
position: fixed;
border: 2px solid #0C6;
background-color: #000;
}
#content {
width: 88%;
height: 400px;
border: 6px solid #F00;
display: block;
color: #fff;
float: left;
position: relative;
max-width: calc(88% - 236px);
min-width: calc(88% - 332px);
}
HTML
<div id="container">
<div id="sidebar"></div>
<div id="content"></div>
</div>
It's a combination of two things. First, if you want to have divs take up 100% height, then you'll need to set the body and html to that as well.
html, body {
height: 100%;
}
Second, you have set the sidebar as position: fixed. This is just like having position: absolute set on it. If you want the sidebar to remain visible at all times, you can do a margin-left: 22%; (or whatever the width of the sidebar is) on #content. If you want the sidebar to flow with the rest of the page, just remove the fixed position.
This is because your sidebar is position: fixed. The best route would be to relatively position/float the sidebar at 100% height and position a fixed wrapper within it.
basic demo
I have the following (jsfiddle):
<div class="content_wrap">
<div class="left_container">
</div>
<div class="right_container">
<div style="background-color: blue; margin:20px; height: 1500px;"></div>
</div>
<div class="clearfix"></div>
</div>
</body>
</html>
CSS:
body,html {
height: 100%;
width: 100%;
background-color: #f8f8f8;
}
div.content_wrap {
width: 100%;
height: 100%;
}
div.left_container {
float:left;
width: 220px;
height: 100%;
background-color: red;
}
div.right_container {
position: relative;
padding: 15px;
padding-top: 100px;
width: 1000px;
}
.clear { clear: both; }
​What I'm trying to do is line the divs side by side and have the left side bar (red) stretch to either the height of the page, or the height taken up by the content (which is in blue), which ever is greater (like the layout shown here)
My problems at the moment are:
The content of the right container (The blue box is just to illustrate content) does not align properly next to the left container
The left container doesn't adjust its height according to the content of the right container.
I've put in a clear fix, although to be quite honest, I don't completely understand how that works.
Would appreciate some guidance.
See this demo: http://jsfiddle.net/PaJ3r/9/
Here is updated CSS for it:
body,html {
height: 100%;
width: 100%;
background-color: #f8f8f8;
}
div.content_wrap {
width: 100%;
position: relative;
}
div.left_container {
float:left;
position:absolute;
width: 220px;
height: 100%;
background-color: red;
}
div.right_container {
position: relative;
padding: 15px;
margin-left: 220px;
padding-top:100px;
width: 1000px;
}
.clear { clear: both; }
position:relative in div.content_wrap is needed in order to get left sidebar stretched to the height of content.
position:absolute; in div.left_container allows left container to fit height of wrapper div.
In div.right_container there is margin-left: 220px; which leave left sidebar visible
Please take a look at this jsfiddle.
So few remarks: I used float: left; on both divs and also, as bart said, you didn't use the correct name for clearfix.
First you should nest your div's so that the left div can grow with the right one.
See updated fiddle
For the left div not set the height, but the min-heigth to 100%. Furthermore you need to play around with margins and paddings to get the last bit ok
I want to have a login form centred on the page. An example is here
I know how to centre an element what I can't work out is how to centre an element always in the centre of the page even if the browser window changes size
Classic problem. Here's some example CSS:
#your_element{
position: fixed;
left: 50%;
top: 50%;
width: 600px;
height: 400px;
margin-left: -300px;
margin-top: -200px;
}
Important bit: the negative margins should be half of the respective dimensions.
Add position: fixed; to it's style. If you know how to center it, then just adding this should do the trick.
Have a look here for more info: http://www.w3.org/TR/CSS2/visuren.html#choose-position
I keep this template HTML just for this situation, when I need a container that is vertically and horizontally centered:
CSS:
html, body {
height: 100%;
}
body {
background: #ffc;
margin: 0;
padding: 0;
}
#vertical-center {
float: left;
height: 50%;
width: 100%;
margin-top: -185px;
}
#content {
background: #ffffde;
border: 2px dashed red;
clear: both;
margin: 0 auto;
padding: 10px;
height: 350px;
width: 500px;
}
HTML:
<div id="vertical-center"></div>
<div id="content">
<h1>Centered Content</h1>
<p>This content is centered on the page.</p>
<p>More importantly, it won't get cut off when the browser window becomes too small to display it.</p>
</div>
Note that the #vertical-center has a margin-top that has to be half the height of the #content div, and it has to be negative.