I'm trying to recreate: http://jsfiddle.net/MGRdP/6/
html, body{
height:100%;
}
.table {
width: 100%;
display: table;
height:100%;
}
.cell {
border: 2px solid black;
vertical-align: middle;
display: table-cell;
height:100%;
}
<div class="table">
<div class="cell">
<p>Text</p>
</div>
</div>
<div class="table">
<div class="cell">
<p>Text</p>
</div>
</div>
using Neat but my divs are not expanding to 100% of the viewport height. Using inspector, I cannot find any discrepancies. Obviously something is off here.
Can someone provide correct markup for neat that allows me to achieve the as the fiddle?
If you want two divs side by side (like the Fiddle), just make each one width:50% and float:left
html, body{
height:100%;
}
.table {
width: 50%;
display: table;
height:100%;
float:left;
}
.cell {
border: 2px solid black;
vertical-align: middle;
display: table-cell;
height:100%;
}
<div class="table">
<div class="cell">
<p>Text</p>
</div>
</div>
<div class="table">
<div class="cell">
<p>Text</p>
</div>
</div>
.table {
width: 50%;
display: table;
height:100%;
float:left;
}
this css make two div to stay side by side.
You can also use
display:inline-block;
vertical-align:top;
width:49%;
to make side by side layout;
To center content use margin:0 auto for child
and two make height as view port use-
height:100vh
jsfiddle link
Related
What I am trying to do is centre the img elements both vertically and horizontally inside the img-container. The img-container needs to be a % of the parent element not a fixed width. (ie the outer-container may not always be 1000px)
Although the code below centres the image fine withing the img-container, the width of the img-continer seems to ignore the CSS width 20%. Ie I cannnot get the img-container to get the correct (in this case 200px) width.
Any suggestions?
-Matt.
Here is my CSS
#outer-container{
width:1000px;
}
.img-container {
height:20vh;
width:20%;
vertical-align:middle;
display: table-cell;
}
.centred-img {
display:block;
margin-left:auto;
margin-right:auto;
max-height:100%;
max-width:100%;
}
Here is my HTML:
<div id="outer-container">
<div class="img-container">
<img class="centred-img" src="1.jpg">
</div>
<div class="img-container">
<img class="centred-img" src="2.jpg">
</div>
<div class="img-container">
<img class="centred-img" src="3.jpg">
</div>
<div class="img-container">
<img class="centred-img" src="4.jpg">
</div>
</div>
Use display:inline-block on the child elements and use text-align:center on the parent.
That should do the trick for horizontal centring. To make it centre vertically, you need to
add line-height to your images parent and vertical-align:middle to image itself.
Try using this CSS.
#outer-container{
width:500px;
border:1px solid black;
}
.img-container {
height:20vh;
width:20%;
display: inline-block;
border:1px solid black;
line-height:20vh;
text-align: center;
}
.centred-img {
vertical-align:middle;
margin-left:auto;
margin-right:auto;
max-height:100%;
max-width:100%;
}
Here's my fiddle just using css tables. Is this what you're looking for? The height and width are both dynamic.
http://jsfiddle.net/sinnix/dpppzuds/
<div class="container">
<div class="row">
<div class="cell">
<img src="http://placehold.it/50">
</div>
<div class="cell">
<img src="http://placehold.it/50">
</div>
<div class="cell">
<img src="http://placehold.it/50">
</div>
<div class="cell">
<img src="http://placehold.it/50">
</div>
</div>
</div>
.container {
display: table;
width: 90%; /* adjust as desired */
height: 100px;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 25%;
background: magenta;
vertical-align: middle;
text-align: center;
}
.cell:nth-child(even){
background: yellow;
}
I'm trying to make the first div child below use up 100% of the available space minus 20px and then use the second div child to use 20px and be on the same line as the first child div.
<div style="width: 10%;">
<div style="float: left; margin-right: 20px;">Left side, should use up all space except margin!</div>
<div style="float: left; margin-left: -20px; width: 20px;">Should only use 20px no matter what.</div>
</div>
This should be able to be done with CSS level one (that means no position lame-outs) though I know I'm missing something. Also there will be anchors in both div elements that must use 100% of the available width so there is a trick here to get the float to behave a certain way...
Solution #1
Make use of overflow: hidden (or overflow: auto) to fill the remaining horizontal space.
(NB: For this to work you need to place the element on the right hand side first in your markup)
FIDDLE
<div>
<div class="div2">DIV 2</div>
<div class="div1">DIV 1</div>
</div>
CSS
.div1 {
background:yellow;
overflow: hidden;
}
.div2 {
background:brown;
float:right;
width: 50px;
}
Solution #2
You can do this with box-sizing: border-box
FIDDLE
<div>
<div class="div1">DIV 1</div>
<div class="div2">DIV 2</div>
</div>
CSS
.div1 {
background:yellow;
float:left;
padding-right: 50px;
margin-right: -50px;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
}
.div2 {
background:brown;
float:left;
width: 50px;
}
Solution #3
Use css tables:
FIDDLE
<div class="container">
<div class="div1">DIV 1</div>
<div class="div2">DIV 2</div>
</div>
.container
{
display:table;
}
.div1 {
background:yellow;
display: table-cell;
width: 100%;
}
.div2 {
background:brown;
width: 50px;
display: table-cell;
word-break: break-word;
min-width: 50px;
}
Solution #4 (CSS3 required)
use calc
FIDDLE
On the first child set width: calc(100% - 50px)
On the second div set width: 50px;
.div1 {
background:yellow;
width: calc(100% - 50px);
float: left;
}
.div2 {
background:brown;
width: 50px;
float: left;
}
Can you change the HTML structure a bit?
<div style="width: 10%;">
<div style="display: block; width: 100%;">
<div style="width: 20px; float: right;"></div>
</div>
</div>
Here's another approach using display:table.
<html>
<style>
body { padding:0; margin:0; display:table; width:100%; }
#content { display:table-row; }
#b1, #b2 { display:table-cell; }
#b1 { background-color:#eee; padding:2em; }
#b2 { width:20px; background-color:#bbb; }
</style>
</head>
<body>
<div id="content">
<div id="b1">
<h1>Main content here</h1>
<p>Side bar on right is 20 px wide.</p>
</div>
<div id="b2">
</div>
</div>
</body>
</html>
I want some divs to get their width from their content. Display:inline-block does this, but I also want the divs to be under each other, not next to each other as floated.
Using float:left instead of inline-block does this, but I want the divs to be center aligned, not left aligned. How can I do this?
on the parent div put white-space: pre-line;
on the child divs add clear : both
#wrapper{ text-align: center; white-space: pre-line; }
#div1, #div2{
display: inline-block;
clear: both;
border: 1px solid grey;
margin: 3px auto 3px auto;
width: auto;
}
<div id="wrapper">
<div id="div1" class="clearfix">some content here that is bigger</div>
<div id="div2" class="clearfix">some content here</div>
</div>
http://jsfiddle.net/judsonmusic/8HCWp/
Working jsFiddle Demo
Consider the following markup:
<div class="container">
<div class="text">apple</div>
<div class="text">banana</div>
<div class="text">kiwi</div>
<div class="text">orange</div>
</div>
Because you want to align your elements, you must use inline, then we will break
them with :after:
.container {
text-align: center;
}
.text {
background: yellow;
display: inline;
}
.text:after {
content: '';
display: block;
}
As mentioned in this thread, there's also a flex solution to this problem:
#container > p {
border-bottom: 2px solid black;
}
#container {
display: flex;
flex-flow: column;
align-items: flex-start;
}
<div id="container">
<p>A text</p>
<p>A text</p>
<p>A longer text</p>
</div>
html is
<div>
abc <div style="margin:4px auto;width:100px;">div1</div><br/>
abc <div style="margin:4px auto;width:100px;">div1</div><br/>
abc <div style="margin:4px auto;width:100px;">div1</div><br/>
abc <div style="margin:4px auto;width:100px;">div1</div><br/>
</div>
and style sheet is
div{
border:1px solid;
padding:10px;
display:inline-block;
}
check demo at http://jsfiddle.net/xupHN/
I need help, I have a 4 div elements, three of them have fixed width, one of them needs to be with auto width. Second element needs to have variable width.
For example:
<div id="wrapper">
<div id="first">
</div>
<div id="second">
</div>
<div id="third">
</div>
<div id="fourth">
</div>
</div>
Css:
#first,#second,#third,#fourth{
float:left;
}
#second{
width:auto;
overflow:hidden;
}
#first,#third,#fourth{
width: 200px;
}
Thanks for help
This can be achieved using display: table-cell jsfiddle
CSS
#wrapper .item{
display: table-cell;
width: 150px;
min-width: 150px;
border: 1px solid #777;
background: #eee;
text-align: center;
}
#wrapper #second{
width: 100%
}
Markup
<div id="wrapper">
<div id="first" class="item">First
</div>
<div id="second" class="item">Second
</div>
<div id="third" class="item">Third
</div>
<div id="fourth" class="item">Fourth
</div>
</div>
Update
Float version
CSS
#wrapper div{background:#eee; border: 1px solid #777; min-width: 200px;}
#first{
float: left;
}
#wrapper #second{
width: auto;
background: #ffc;
border: 1px solid #f00;
min-width: 100px;
overflow: hidden;
}
#first, #third, #fourth{
width: 200px;
}
#third, #fourth{float: right;}
Markup, Move #second to end
<div id="wrapper">
<div id="first">First</div>
<div id="third">Third</div>
<div id="fourth">Fourth</div>
<div id="second">Second</div>
</div>
i think you might be looking for this one:
This is for your reference if you are having such a thing then you can do the trick with this, i exactly don't know how your css looks like but this is basic idea.
Demo Here
CSS
#wrapper
{
width:960px;
}
#first
{
float:left;
width:240px;
}
#second
{
width:240px;
float:left;
}
#third
{
float:left;
width:240px
}
Here your last div width will be set automatically.
Any idea how to achieve the layout indicated in the image below with pure CSS, if the order of the divs in the markup must be as follows?
NOTE - The height of each panel is unknown; wrapper divs may be added to the markup
<body>
<div id="content"></div>
<div id="nav"></div>
<div id="search-results"></div>
</body>
This technique is taken from the question
Make a div display under another using CSS in a totally fluid layout.
It uses CSS table presentation using properties of display: table family to rearrange the presentation order of dom elements.
As said in the above question:
This works in all modern browsers, and IE8 if you're careful. It does
not work in IE6/7.
HTML
<div id="wrapper">
<div id="content-wrapper">
<div id="content">content</div>
</div>
<div id="nav-search-block">
<div id="nav-wrapper">
<div id="nav">nav</div>
</div>
<div id="search-results-wrapper">
<div id="search-results">search-results</div>
</div>
</div>
</div>
CSS
#wrapper {
display: table;
width: 100%;
}
#nav-wrapper,
#search-results-wrapper {
float: left;
width: 50%;
}
#nav,
#search-results {
color: #ffffff;
background: #6699ff;
padding: 10px;
margin: 10px;
}
#nav-search-block {
display: table-row-group;
}
#content-wrapper {
display: table-footer-group;
}
#content {
color: #ffffff;
background: #cc0000;
padding: 10px;
margin: 10px;
}
Demo
Now you can do this in javascript
as like this
Javascript
document.getElementById('one').innerHTML=document.getElementById('content').innerHTML;
CSS
#content{
display:none;
}
#one{
background:red;
padding:10px;
clear:both;
}
#nav{
background:green;
float:left;
width:35%;
}
#search-results{
float:right;
width:65%;
background:yellow;
}
HTML
<body>
<div id="content">Content I m first in html </div>
<div id="nav">navi</div>
<div id="search-results">Search-Results</div>
<div id="one"></div>
</body>
Live Demo