I need a 3 or 4 column responsive div system. Reading some question here I found this snippet:
HTML:
<div class="core">
<div class="box">
<div class="text">Text</div>
</div>
<div class="box">
<div class="text">Text</div>
</div>
<div class="box">
<div class="text">Text</div>
</div>
</div>
CSS:
.core {width: 100%; display: table; border-spacing: 10px;}
.box{
background-color: coral;
width: 32.03125%;
float:none;
display: table-cell;
border-radius:5px;
}
.text{
padding: 10px;
color:white;
font-weight:bold;
text-align:center;
}
which is basically what I need and what I already have. The problem is when the with gets smaller I want it to get the blocks down, like a paragraph.
Instead of this:
I want this:
Try this CSS:
.core {width: 100%; display: table; border-spacing: 10px;}
.box{
background-color: coral;
width: 100%;
float:none;
display: table-row;
border-radius:5px;
}
.text{
padding: 10px;
color:white;
font-weight:bold;
text-align:center;
}
The problem is when the with get's smaller I want it to get the blocks
down
This link you found is not using any responsive frameworks. It's just simple CSS + HTML
Related
I have a div which I need to expand to show the contained text and only wrap the text once the div would exceed the specified max-width. This works fine if the div content is just text but if the text floats around a floating element, the width of the div is calculated as if the floating element were not there. This causes the text to wrap even though the div is well below it's max-width.
See example below with two divs that are identical apart from the second having a floated box in the corner.
Clicking the button repeatedly in the first div correctly causes the div to expand correctly so the text only starts to wrap when the 500px max-width is reached.
When you do the same to the second div the div does not correctly expand to contain the contents without the text wrapping. It appears the div width only increases when the text content reaches the length if it were not flowing around the floated div.
Short of a javascript to calculate and manually adjust the width, is there a way in CSS to make the auto width behave as expected?
function fillDialog(el) {
var contents = el.parentElement.getElementsByClassName('content');
var old_html = contents[0].innerHTML;
contents[0].innerHTML = old_html+" more text";
}
#page {
background:white;
width:100%;
height:600px;
position:relative;
padding:20px;
}
.dialog {
position: relative;
clear:both;
float:left;
border: 2px black solid;
margin-top:20px;
padding:20px;
min-height:120px;
width:auto;
min-width:200px;
max-width:500px;
box-sizing: border-box;
}
.modalButton {
position: absolute;
bottom: 10px;
left: 10px;
z-index: 1;
}
.icon {
float:left;
width:30px;
height:30px;
background-color:cornflowerblue;
margin:0px 10px 10px 0px;
padding:10px;
border:1px black solid;
text-align: center;
font-size: 30px;
}
<div id="page">
<div style="width:200px; float:left; background-color: #999;">200px</div>
<div style="width:300px; float:left; background-color: #BBB;">500px</div>
<div class="dialog">
<button class="modalButton" type="button" onclick="fillDialog(this)">Add text</button>
<div class="content">Content
</div> <!-- close content -->
</div> <!-- close dialog -->
<div class="dialog">
<button class="modalButton" type="button" onclick="fillDialog(this)">Add text</button>
<div class="icon"> ! </div>
<div class="content">Content
</div> <!-- close content -->
</div> <!-- close dialog -->
</div> <!-- close page -->
You can use display flex to get what you want.
function fillDialog(el) {
var contents = el.parentElement.getElementsByClassName('content');
var old_html = contents[0].innerHTML;
contents[0].innerHTML = old_html+" more text";
}
#page {
background: white;
width: 100%;
height: 600px;
position: relative;
padding: 20px;
}
.dialog {
width: fit-content;
position: relative;
display: flex;
border: 2px black solid;
margin-top: 20px;
padding: 20px;
min-height: 120px;
min-width: 200px;
max-width: 500px;
box-sizing: border-box;
}
.modalButton {
position: absolute;
bottom: 10px;
left: 10px;
z-index: 1;
}
.icon {
flex-shrink: 0;
width: 30px;
height: 30px;
background-color: cornflowerblue;
margin: 0px 10px 10px 0px;
padding: 10px;
border: 1px black solid;
text-align: center;
font-size: 30px;
}
<div id="page">
<div style="width:200px; float:left; background-color: #999;">200px</div>
<div style="width:300px; float:left; background-color: #BBB;">500px</div>
<div class="dialog">
<button class="modalButton" type="button" onclick="fillDialog(this)">Add text</button>
<div class="content">Content
</div> <!-- close content -->
</div> <!-- close dialog -->
<div class="dialog">
<button class="modalButton" type="button" onclick="fillDialog(this)">Add text</button>
<div class="icon"> ! </div>
<div class="content">Content
</div> <!-- close content -->
</div> <!-- close dialog -->
</div> <!-- close page -->
So i have a container with a some text and a button after the text. This widget is repeated several times on my screen. Each container is having its height set based on the height of its contents and its a bootstrap column so its width changes as well. My problem is I want the button to always stick to the bottom of its widget, but if I set the position: absolute; bottom:0; right:25%; it is only centered as long as the widgets width doesn't change. Which it does. Any suggestions?
Here's your "flex"able friend in action. I am using some arbitrarily sized divs for illustration purposes:
div {
background: pink;
display: flex;
justify-content: center;
align-items: flex-end;
float: left;
margin-right: 10px
}
#flexDiv1 {
height: 200px;
width: 100px;
}
#flexDiv2 {
height: 300px;
width: 70px;
}
#flexDiv3 {
height: 100px;
width: 200px;
}
<div id="flexDiv1">
link
</div>
<div id="flexDiv2">
link
</div>
<div id="flexDiv3">
link
</div>
Check if this is what you need:
<div class="holder">
<div class='widget-footer'>
<button class="btn-inner">
foo
</button>
</div>
</div>
html, body{
height:100%;
margin:0;
padding:0;
}
.holder{
width: 100%;
height:100%;
/*height: 250px;*/
background: #dedede;
position:relative;
}
.widget-footer{
position:absolute;
bottom:0;
text-align:center;
width:100%;
}
.btn-inner{
margin-bottom: 5px;
}
https://jsfiddle.net/qw54w9j9/2/
Easy:
CSS
#dinamic {
position:relative;
height: 300px;
background: #ddd;
}
.center-bottom {
position:absolute;
bottom:0;
left:0;
right:0;
text-align:center
}
HTML
<div id="dinamic">
<div class="center-bottom">
<button>Click-me!</button>
</div>
</div>
https://jsfiddle.net/8pyn4Le4/
I am trying to center 3 div into a parent div with no result.
Could you help me please ?
HTML :
<div id="container">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
CSS :
#container {
text-align: center;
}
#left, #middle, #right {
width: 200px;
float: left;
background: red;
height: 90px;
}
RESULT :
Change the float:left; to display:inline-block;, like this:
#left, #middle, #right {
width: 200px;
display:inline-block;
background: red;
height: 90px;
}
you can try this one:
#left, #middle, #right {
width: 200px;
display:inline-block;
background: red;
height: 90px;
}
DEMO HERE
Try display flex. You'll need to add vendor prefixes!
#container {
text-align: center;
display: flex;
justify-content: space-between;
width: 100%;
}
#left, #middle, #right {
width: 200px;
background: red;
height: 90px;
}
<div id="container">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
#container {
text-align: center;
}
#left, #middle, #right {
width: 200px;
margin:0px auto;
height: 90px;
}
#left
{
background: red;
}
#middle
{
background:blue;
}
#right
{
background: green;
}
<div id="container">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
Add Bootstrap CSS and have a look at this example.
Here:
COL=Column
MD=Medium Sized Device
4 represents the partition of the screen as the Maximum column possible in a single row is 12
So 4/12=3 Panels in result.
<div class="row">
<div class="col-md-4">left</div>
<div class="col-md-4">middle</div>
<div class="col-md-4">right</div>
</div>
Try Bootstrap it will make your life easy.
Here's link for the Grip System you want Bootstrap Grid System.
remove float & add display inline-block
#left, #middle, #right {
width: 200px;
display:inline-block;
background: red;
height: 90px;
}
Add margin-left: auto, margin-right:auto, width: 600px to your container.
Thanks
In my website, i have a series of divs like this:
.box{
float:left;
width:143px;
height:183px;
overflow:hidden;
}
These divs are inside a simple container like this:
.container{
margin:70px 190px 0 190px;
overflow:hidden;
}
I would realize a responsive layout but the divs are not horizontal centered in the container. I tried to add "margin-left:auto;" and "margin-right:auto" but nothing. I have a layout as this:
Instead, i would a layout as this:
Can someone help me?
Solution using FlexBox.
FlexBox Guide
FlexBox Browsers Compatibility
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
margin:7px 19px 0 19px;
background-color: red;
}
.box {
width:143px;
height:183px;
margin: 10px;
background-color: black;
}
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
See this fiddle
You can achieve this using display:inline-block;, So kindly remove the float:left used in your CSS.
I have made an example like below,
HTML
<div class="container">
<div class="div1">
</div>
<div class="div1">
</div>
<div class="div1">
</div>
<div class="div1">
</div>
</div>
CSS
.div1{
margin:10px;
width:25%;
height:100px;
display:inline-block;
background-color:red;
}
You can not achieve this using float. You can use display: inline-block.
.box{
width:143px;
height:183px;
overflow:hidden;
display: inline-block;
}
.container{
margin:70px 190px 0 190px;
overflow:hidden;
text-align: center;
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container{
overflow: hidden;
max-width: 500px;
margin: 0 auto;
}
.box{
float:left;
width: 31%;
height: 183px;
background: #f00;
margin: 1%;
}
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
I have a page I'm creating where I want to have to columns the first colomn has a fixed a sized and the second column has to fill the rest of the window width. This is what I came up so far but it doesn't seen to work.
HTML:
<div id="container">
<div class="nav"></div>
<div class="page">my page content</div>
</div>
CSS:
#container{
width: 100%;
padding: 0 0;
}
#container > div{
color: white;
}
.nav{
width:200px;
height:500px;
float:left;
background-color:#666;
}
.page{
height:500px;
float:left;
background-color:#FFF;
}
JS FIDDLE
Just remove float: left and add width: 100% to .page
http://jsfiddle.net/scNSL/2/
You probably can do it like this: http://jsfiddle.net/scNSL/4/
<div id="container">
<div class="page">
<div class="nav"></div>
Inhalt
</div>
</div>
#container{
width: 100%;
padding: 0 0;
}
#container > div{
color: white;
}
.nav{
width:200px;
height:500px;
float:left;
background-color:#666;
}
.page{
height:500px;
width:100%;
float:left;
background-color:#333;
}
Try this,
.page{
height:500px;
width:100%;
background-color:#FFF;
}
Note: Removed float:left; & added width:100%;
Instead of writing it myself...
Check out this article for more information:
http://css-tricks.com/fluid-width-equal-height-columns/
Should help you learn more about equal height columns 100% height etc.
Try this:
#container{
width: 100%;
padding: 0 0;
}
#container > div{
color: white;
}
.nav{
width:40%;
height:500px;
float:left;
background-color:#666;
}
.page{
height:500px;
width: 60%;
float:left;
background-color:#333;
}
The classical way of creating a fixed + fluid column layout is to float an element next to another element with padding:
HTML:
<div class="container">
<div class="nav"></div>
<div class="page">content</div>
</div>
CSS (float):
.container {
color: #FFF;
}
.nav {
background-color: #666;
float: left;
height: 200px;
width: 200px;
}
.page {
background-color: #333;
height: 200px;
padding-left: 200px;
}
This has some drawbacks, particularly when the .nav and .page elements have differing heights, or when you want to add a border around the .page element.
The modern way of creating a fixed + fluid column layout is to use flexbox:
.container {
color: #FFF;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
.nav {
background-color: #666;
height: 200px;
width: 200px;
}
.page {
background-color: #333;
-webkit-flex: 1;
flex: 1;
height: 200px;
}
fiddle (pardon the BEM classes, they're used so that the difference in CSS between these two methods can be seen more readily)
True Fit (allows for borders)
Change to this (see fiddle):
.page{
height:500px;
overflow: hidden; /* or auto */
background-color:#FFF;
}
By not floating the .page, and setting an overflow other than visible, the browser fills a block level element with the space beside the floated element (good explanation here).
Why this can be better than setting width: 100%
Compare these div elements with borders. One with width at 100%, one with the overflow set as above.