I have 3 divs within a container with each of their widths set at 100%. if I float them all left they will stack on top of each other. What I would like for them to do is float next to each other horizontally. Changing the width of the div to a fixed width works fine. How can I achieve this? Thank you for your help and time.
html
<div id="scroller">
<div id="slide-container">
<div class="slide" style="background-color:yellow;">
</div>
<div class="slide" style="background-color:orange;">
</div>
<div class="slide" style="background-color:red;">
</div>
</div>
</div>
css
body, html {
margin:0;
padding:0;
}
#scroller {
min-width:100%;
height:400px;
background-color:blue;
position:relative;
overflow:hidden;
}
#slide-container {
height:100%;
position:relative;
left:0;
white-space:nowrap;
font-size:0;
}
.slide {
height:100%;
width:100%;
margin:0;
padding:0;
float:left;
}
https://codepen.io/justinhdevelopment/pen/bGexaJy codepen example of problem
Here is some use of flex and overflow-x to make your desired effect. You can further make changes as per your need-
body, html {
margin:0;
padding:0;
overflow: none;
}
#slide-container {
height:400px;
width: 100%;
display: flex;
flex-wrap: no-wrap;
overflow-x: auto;
}
.slide {
height:400px;
min-width:100%;
}
#scroller {
min-width:100%;
height:400px;
background-color:blue;
position:relative;
overflow:hidden;
}
<div id="scroller">
<div id="slide-container">
<div class="slide" style="background-color:yellow;">
</div>
<div class="slide" style="background-color:orange;">
</div>
<div class="slide" style="background-color:red;">
</div>
</div>
</div>
If I am understanding what you are looking for correctly what you are looking for is using a flex display in your parent div:
#slide-container {
height:100%;
position:relative;
left:0;
white-space:nowrap;
font-size:0;
display: flex;
}
Take a look at this for further reference:
https://www.w3schools.com/css/css3_flexbox.asp
Related
I have problems placing a div within another div which has a defined height of lets say 400px.
When i set the inner div to 100% then its overlapping the outer div and goes over the outer one. Why isnt 100% height sizing the inner div to the outer divs height?
body {
min-width:300px;
}
.header {
background-color:pink;
width:100%;
height:400px;
}
.menu {
background-color: red;
}
.header-container {
color:white;
background-color:gray;
height:100%;
max-width:400px;
margin:auto;
}
.headline {
padding-right:36px;
padding-left:36px;
padding-top:54px;
padding-bottom:54px;
}
.clearfix {
clear:both;
}
<div class="header">
<div class="menu">
menu
</div>
<div class="header-container clearfix">
<div class="headline">
<span>das ist mein blog</span>
<span>this is the underline</span>
</div>
</div>
</div>
<div class="blog">
y
</div>
<div class="footer">
x
</div>
https://jsfiddle.net/g9ec4nw8/
Because the the padding on the .header-container is causing an overflow.
Adding box-sizing: border-box; to your .header-container, will fix the box-sizing issue.
But not only that, you haven't taken into account the 18px of height by your .menu.
In full, by changing your .header-container to the following code:
.header-container {
color:white;
background-color:gray;
height:calc(100% - 18px);
max-width:400px;
box-sizing: border-box;
margin:auto;
top:0;
bottom:0;
padding-right:36px;
padding-left:36px;
padding-top:54px;
padding-bottom:54px;
}
Will fix the issue.
Fiddle Here.
i have simple issue with HTML positions
in the following code i have one wrapper div> Container in this div
i have 2 more divs name is side_bar_wrap and left_wrap in left_wrap div i have
4 thumbnails divs name are same as thumbnails my issue is how can i align this 4 thumbnails div with space between right and left but no on first and last div of this group
following is my code, please help me..
<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>
.container
{
width:100%;
max-width:1170px;
margin:0 auto;
}
*
{
margin:0;
padding:0;
}
.side_bar_wrap
{
width:29%;
height:300px;
background:#148b23;
margin:0 10px 0 0;
float:left;
}
.left_wrap
{
width:70%;
float:right;
}
.thumbnails{
width: 22%;
margin: 0 11px;
position: relative;
overflow: hidden;
height:300px;
border:1px solid #cfcfcf;
float:left;
}
.inner_task
{
}
.clear
{
clear:both;
}
<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>
<div class="container">
<div style="width:29%; float:left; height:400px; background:gray; margin:40px 11px 40px 0;"></div>
<div style="width:70%;float:left; height:400px; background:gray; margin:40px 0;"></div>
<div class="side_bar_wrap"></div>
<div class="left_wrap">
<div class="thumbnails">
<div class="inner_thumb">
<div style="width:100%; height:200px; background:#efefef;"></div>
</div>
</div>
<div class="thumbnails">
<div class="inner_thumb">
<div style="width:100%; height:200px; background:#efefef;"></div>
</div>
</div>
<div class="thumbnails">
<div class="inner_thumb">
<div style="width:100%; height:200px; background:#efefef;"></div>
</div>
</div>
<div class="thumbnails">
<div class="inner_thumb">
<div style="width:100%; height:200px; background:#efefef;"></div>
</div>
</div>
</div>
<div style="width:100%; float:left; height:400px; background:gray; margin:40px 0;"></div>
</div>
You can use the first-child and last-child that css provides for you
Basically first-child allow you to make style changes to the first div, and last-child allows you to make changes to the last div
so something like this:
.thumnails:first-child {
/*NO SPACE ON ONE SIDE*/
margin-left:0px;
}
.thumnails:last-child {
/*NO SPACE ON ONE SIDE*/
margin-right:0px;
}
If you want advance alittle more you can use :nth-child(), for when you you want to change the style of the third div or whatever, so
.thumnails:nth-child(3) {
background-color:#ff0000;
}
Using CSS I am trying to get a div to fill a dynamicly sized container that also contains a fixed height div.
How can the grey div (See snippet) be made to fill the remaining available space only without overflowing?
The grey div .Fill cannot have anything inside it.
I would prefer to use CSS Flex only as a last resort.
FIDDLE
html,body{height:100%;}
.Wrap{
height:100%;
width:50%;
}
.H40,.H60{
display:block;
padding:15px;
box-sizing:border-box;
}
.H40{
height:40%;
background:#b00;
}
.H60{
height:60%;
background:#58c;
}
.Top{
background:#8d5;
height:40px;
}
.Fill{
height:100%;
width:100%;
background:#DDD;
}
<div class="Wrap">
<div class="H40">
<div class="Top">TOP</div>
<div class="Fill">Fill this space</div>
</div>
<div class="H60">
<div class="Top">TOP</div>
<div class="Fill">Fill this space</div>
</div>
</div>
try this
use calc for that
.Fill{
height:calc(100% - 40px);
width:100%;
background:#DDD;
}
http://jsfiddle.net/pgys24ct/3/
I think display:table, display:table-row and display:table-cell will solve this.
JSfiddle Demo
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,body{height:100%;}
.Wrap{
height:100%;
width:50%;
}
.H40,.H60{
display: table;
padding:15px;
height:100%;
width:100%;
}
.H40{
height:40%;
background:#b00;
}
.H60{
height:60%;
background:#58c;
}
.Top{
display: table-row;
background:#8d5;
height:40px;
}
.fill {
display: table-cell;
background: #ccc;
height:100%;
}
<div class="Wrap">
<div class="H40">
<div class="Top">TOP</div>
<div class="fill"></div>
</div>
<div class="H60">
<div class="Top">TOP</div>
<div class="fill"></div>
</div>
</div>
Add height:calc(100% - 20px); in .Fill in your CSS.
Imagine a page with the basic structure as below. The main question is how do I get the .left background to extend all the way to the left side of the window, and the .right to extend to the right side? Both need to remain fixed width.
HTML:
<body>
<div class="container">
<header>blah</header>
<article>doodle doo</article>
<div class="left">Left stuff with blue background</div>
<div class="right">Right stuff with red background</div>
<div class="clear"></div>
</div>
<footer>deedle dee</footer>
</body>
CSS:
.container{
width:400px;
margin:0 auto;
}
header{
background-color:grey;
}
.left{
width:200px;
float:left;
background-color:blue;
}
.right{
width:200px;
float:right;
background-color:red;
}
.clear{
clear:both;
}
footer{
background-color:#DDD;
text-align:center;
}
Fiddle here
The basic idea is the same as this page, but you might notice that the page scrolls a loooong way to the right - the cut off doesn't actually work.
I have achieved this with display: table and pseudo elements.
The basics of this solution:
The wrapper .content is made display: table and given position: fixed to allow its "cells" to have your fixed width. Provide spacing ,if required, with border-spacing: unit size;
.left and .right are given display: table-cell
.content:before and .content:after provide pseudo columns (also with display: table-cell) to space out the background.
Have an example!
HTML
<header></header>
<article></article>
<div class="content">
<div class="column left"></div>
<div class="column right"></div>
</div>
<footer></footer>
CSS
* {
margin:0;
padding:0
}
html,body {
height:100%
}
.content {
display:table;
table-layout:fixed;
height:100%;
width:100%
}
header {
background-color:grey;
height:20px;
width:500px;
margin:0 auto
}
article {
height:20px;
width:500px;
margin:0 auto
}
.column {
display:table-cell;
width:200px;
vertical-align: top
}
.left {
height:100%;
background:blue
}
.content:before,.content:after {
display:table-cell;
content:'';
background:blue;
height:100%;
vertical-align: top;
padding-left:10%
}
.content:after {
background:red;
padding-right:10%
}
.right {
background-color:red
}
footer {
background-color:#DDD;
text-align:center;
height:50px
}
1) Put your left and right elements into another container:
<div class="container">
<header>blah</header>
<article>doodle doo</article>
</div>
<div class="container2">
<div class="left">
<div class="text">Left stuff with blue background</div>
<div class="clear"></div>
</div>
<div class="right">
<div class="text">Right stuff with red background</div>
<div class="clear"></div>
</div>
</div>
<footer>deedle dee</footer>
2) The container2 width is 100%, let the left and right to be 50%:
.left {
width:50%;
float:left;
background-color:blue;
}
.right {
width:50%;
float:right;
background-color:red;
}
3) The text element on your both columns, should be 200px:
.text {
width: 200px;
}
.left .text {
float: right;
}
.right .text {
float: left;
}
Working jsFiddle Demo.
Im working on a page.. where Margin 0 auto not work in div with display:table cell
here's my codeCSS Styles
<style>
html,body{
height:100%;
width:100%;
}
.wrapper{
background-color:#999;
height:500px;
}
.tableContent{
display:table;
height:500px;
}
.tableContentRow{
display:table-row;
}
.tableContentCell{
display:table-cell;
vertical-align:middle;
height:500px;
}
.loginBox{
height:100px;
background-color:#FFF;
width:250px;
margin:0 auto;
}
</style>
Here's the HTML
<div class="wrapper">
<div class="tableContent">
<div class="tableContentRow">
<div class="tableContentCell">
<div class="loginBox">
<!-- More contents Go HEre -->
</div>
</div>
</div>
</div>
</div>
The loginBox div does not position to the center of the tableContentCell divPlease help...
Set a specific width on the .tableContentCell div and you'll be ok.
Fiddle
The table itself is not centered.
Check this fiddle.
.tableContent{
margin:0 auto;
}