I cannot figure this one out.
When using display:table along with display:table-cell, placing an img tag in either cell1 or cell2 will force the content (the "This is a test" content for example), in the other cell to drop below the image. Is this correct? It does this across all browsers so I'm thinking this is correct, but why?
<html>
<head>
<title></title>
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div {
border: 2px solid #000;
width: 100%;
height: 100%;
}
.table {
display: table;
border-collapse: collapse;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 50%;
}
</style>
</head>
<body>
<div class="table">
<div class="row">
<div id="cell1" class="cell">
<h1>This is a test</h1>
</div>
<div id="cell2" class="cell">
<img src="" />
</div>
</div>
</div>
</body>
</html>
Hm. vertical-align: top in the table-cell.
Workin example: at jsFiddle
This is because inserting an image into the div, takes your layout out of the natural flow of the layout.
I would suggest just using tables, or if not the case use float, and create it that way.
set style="verticle-align:top" for your "cell" divs
Related
I want to add divs on both sides of the image. I'm trying to make two yellow
horizontal rectangular divs on both sides.
You can use flex boxes in CSS. Read about it here: FLEX-BOX
Fiddle here: fiddle Thank you to Alon Eitan for his valuable suggestion!
So, encapsulate your entire div with a parent div and then you can play around with the heights and width.
So your structure will be like:
<div id="mainDiv">
<div id="div1">
</div>
<div id="img1">
<img id="image" src="http://i.imgur.com/HKwhBJp.png"/>
</div>
<div id="div2">
</div>
</div>
Put the image in a div and use pseudo-elements
body {
width: 100vw;
height: 100vh;
background: rgb(141, 0, 0);
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.image-container {
width: 100vw;
height: 50vh;
background: red;
display: flex;
}
.image-container:before,
.image-container:after {
content: "";
display: block;
width: 25%;
height: 100%;
background: yellow;
}
.image {
width: 50%;
height: 100%;
}
<div class="image-container">
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/4/4f/World_topic_image_Satellite_image.jpg">
</div>
Your requirement should be starting somewhere what this image is showing below. You can tinker around with it to get the layout which you need
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<style type="text/css">
#container{width:100%;height:100%; background-color: white;}
#left{float:left;width:100px;height:100px;background-color: yellow;}
#right{float:right;width:100px;height:100px;background-color: orange;}
#center{margin:0 auto;width:100px;height:100px;background-color: violet;}
</style>
<div id="container">
<div id="left">Your Left Div</div>
<div id="right">Your Right Div</div>
<div id="center">Image Goes Here</div>
</div>
</body>
</html>
I have a div in the following format
<div id="main">
<div id="row1">
<div id="label1"></div>
<div id="value1"></div>
</div>
<div id="row2">
<div id="labe2"></div>
<div id="value2"></div>
</div>
<div id="row3">
<div id="label3"></div>
<div id="value3"></div>
</div>
</div>
I am trying to achieve a layout, where all the values are aligned on top of each other to the right and labels to the left within each row.
I have tried using float:left and float:right like
css
#row1{
display: inline
}
#value1{
float:right
}
#row2{
display: inline
}
#value2{
float:right
}
#row3{
display: inline
}
#value3{
float:right
}
But, this css i tried is missing the layout and row items are colliding into each other. Can someone help what could be the issue?
If you are familiar with how a HTML table works, then you can use display:table-* properties. Btw, use class instead of id. Use id specifically for things such as DOM manipulation or forms. Do not use id for styling unless you have no other choice.
SNIPPET
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>inline</title>
<style>
#main {
border: 5px dotted grey;
display: table;
width: 300px;
}
.row {
display: table-row;
}
.value {
border: 1px solid red;
display: table-cell;
width: 50%;
}
label {
border: 1px solid blue;
display: table-cell;
}
</style>
</head>
<body>
<main id="main">
<div class='row' id="row1">
<label for='value1'>V1</label>
<div id="value1" class='value'>44</div>
</div>
<div class='row' id="row2">
<label for='value2'>V2</label>
<div id="value2" class='value'>ALPHA</div>
</div>
<div class='row' id="row3">
<label for='value3'>V3</label>
<div id="value3" class='value'>💀</div>
</div>
</main>
</body>
</html>
If I've understood your question right you want to have labels on the left and values on the right just in front of their labels.
Here is example for you http://codepen.io/g1un/pen/PGKEwB
Add to your rows class row and to labels class label and apply the next css to it:
.row::after {
clear: both;
display: table;
content: '';
}
.label {
float: left;
}
And don't apply to your rows display: inline; - it just does harm to your code.
Here's my solution - rather simple, replaced your whole CSS (i.e. no other CSS):
* {
box-sizing: border-box;
margin: 0;
}
div {
border: 1px dotted #fa5;
}
#main > div > div {
display: inline-block;
width: 49.8%;
padding: 10px;
}
Codepen: http://codepen.io/anon/pen/GjvykB
Change the width value to any desired setting < 50%
P.S.: border isn't necessary, used only to visualize the elements, th very last padding also isn't necessary
If you don't need to support older IE browsers, go with flexbox
Side note: Don't use id like that, use class
.main > div {
display: flex;
}
.main > div > div {
margin: 0 10px;
}
<div class="main">
<div class="row1">
<div class="label1">1</div>
<div class="value1">One</div>
</div>
<div class="row2">
<div class="label2">2</div>
<div class="value2">Two</div>
</div>
<div class="row3">
<div class="label3">3</div>
<div class="value3">Three</div>
</div>
</div>
on my opinion - try display: inline-block; I will hope it help you.
Looking through some documentation, it looks like you an try using position for left and right alignment. I would suggest trying out something like in the documentation:
.right {
position: absolute;
right: 0px;
width: 300px;
}
This is what I want to achieve:
Footer should stay at the bottom of the screen even if the content doesn't fill the viewport vertically.
Content columns have a border that should always be 100% content height. As the number and width of columns will change from page to page, background-image to fake column borders can’t be used.
There should be no scrollbars when all content is visible (Example 1).
Solution should be all HTML/CSS, no JS.
Minimum browser support should be IE9+ and latest desktop versions of Firefox, Chrome, Safari, Opera; with no quirks mode.
Width of the header/footer/content is always fixed (so header and footer don’t need to be placed inside content area). Height of header and footer is also fixed.
I’ve tried techniques from Fluid Width Equal Height Columns and this sticky footer example but haven’t been able to satisfy all the requirements at the same time. Any tips are appreciated.
Edit: So far the farthest I’ve got is by imitating tables which works correctly in webkit browsers but not in IE9 and Opera. See the fiddle here.
HTML:
<div class="table outer">
<div class="row header">
<div class="cell">header</div>
</div>
<div class="row content">
<div class="cell">
<div class="table inner">
<div class="row">
<div class="cell">content 1</div>
<div class="cell">content 2</div>
<div class="cell">content 3</div>
</div>
</div>
</div>
</div>
<div class="row footer">
<div class="cell">footer</div>
</div>
</div>
CSS:
html, body {
height: 100%;
}
.table {
display: table;
min-height: 100%;
height: 100%;
}
.table.outer {
width: 500px;
margin: 0 auto;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
.header, .footer {
height: 25px;
background-color: #999;
}
.content {
background-color: #eee;
}
.table.inner {
width: 100%;
min-height: 100%;
height: 100%;
}
.table.inner .cell {
width: 33%;
border-right: 1px dashed #c00;
}
While not a semantically desirable solution, the only way I could find to achieve all stated requirements is to go back to the 90s and use tables for layout.
See the fiddle here.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<table class="outer">
<tr>
<td class="header" colspan="3">header</td>
</tr>
<tr class="content">
<td>content1</td>
<td>content2</td>
<td>content3</td>
</tr>
<tr>
<td class="footer" colspan="3">footer</td>
</tr>
</table>
</body>
</html>
CSS:
html, body {
height: 100%; margin: 0;
}
.outer {
min-height: 100%;
height: 100%;
width: 500px;
margin: 0 auto;
}
.header, .footer {
height: 25px; background-color: #999;
}
.content td {
width: 33%;
background-color: #eee;
border-right: 1px dashed #c00;
vertical-align: top;
}
Try this :
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
In case anyone is interested, I figured out a solution that uses jQuery (instead of tables).
http://benpearson.com.au/web-development/3-column-fluid-layout-with-header-sticky-footer-and-100-percent-height-columns/
The question is clear, I hope.
I have the body of the DOM (which should be any height, thinking to a user that reside the window) and I'd like to center (in vertical) an element (which can contain other children, but this doesnt mean).
Is it possible? Maybe using a table? I'd like to avoid Js...
You'll need a proper markup. Something like this
<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px; margin:0px;">
<div style='display : table; width : 100%; height : 100%'>
<div style='display : table-row;'>
<div style="border:solid; display : table-cell; vertical-align : middle">
Hello
</div>
</div>
</div>
</body>
</html>
Live Example (checkout my answer for this question)
There is another way too
<html>
<body style='width : 100%; height : 100%'>
<div style='position : absolute; width : 50px; height : 50px; margin : -25px 0px 0px 0px; top : 50%; border : 1px solid #000'>
</div>
</body>
</html>
Here, the extra div elements as seen in the earlier method can be avioded.
Live Example
That's a tricky method I used. Note that wrapper gives height and wrapper > div gives width.
That should not work on IE...
<html>
<head>
<style>
html, body {
height: 100%; width: 100%; margin: 0; display: table;
vertical-align: middle
}
#wrapper {
display: table-cell;
height: 100px;
vertical-align: middle;
width: 100%;
}
#wrapper > div {
width: 50%; margin: auto;
border: 1px solid red
}
</style>
</head>
<body>
<div id="wrapper">
<div class="content">
content there...
</div>
</div>
</body>
</html>
I have a table based layout which is 100% height/width with no scrollbars. The header (red) automatically expands to fit the content and I don't know how many pixels it will be. The fluid table below gives exactly what I what.
<html>
<body height=100%>
<table height=100% width=100% padding=0>
<tr height=1><td colspan=2 bgcolor=red>Fit<br/>to<br/>content<br/>height</td></tr>
<tr><td bgcolor=blue width=66% valign=top>How can I do this with CSS?</td><td bgcolor=green valign=top>
<div style="height:100%; width:100%; overflow:auto;">
This area can have content that overflows - needs an independent scrollbar.<br/>
0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>
0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>
0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>
0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>
</div>
</td></tr>
</table>
</body>
</html>
How can I do the same layout in CSS and have it work on commonly used browsers?
The header shouldn't be too difficult, for the two columns, I think you'll need to use faux columns to make the colours stretch all the way to the bottom.
For the header I think you'll just want:
HTML:
<div id="header">Fit<br/>to<br/>content<br/>height</div>
CSS:
#header {
background-color: red;
width: 100%;
}
p.s. You just made my eyes bleed ;)
<html>
<head>
<style type="text/css">
#wrapper
{
height: 100%;
width: 100%;
padding: 0;
}
#header
{
float: left;
width: 100%;
background-color: red;
}
#main
{
height: 100%;
width: 100%;
float: left;
}
#main-left
{
height: 100%;
float: left;
width: 66%;
background-color: blue;
}
#main-right
{
height: 100%;
float: left;
width: 34%;
background-color: green;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
Fit<br />to<br />content<br />height
</div>
<div id="main">
<div id="main-left">
How can I do this with CSS?
</div>
<div id="main-right">
Tested in Chrome 2 and IE8
</div>
</div>
</div>
</body>
</html>