Spent 2 days fighting with this: http://jsfiddle.net/DQFja/537/
Basically have a parent div called "table" and 2 cells in it. One cell has sub-div, another cell has an image. Image is not displayed on the top left side of the div as I would've expected. This can be fixed by removing "height" attribute from the sub-div but I need it (the div is used for background and cell1 is also used for background).
<div id="table">
<div id="cell1">
<div id="sub-cell1">
</div>
</div>
<div id="cell2">
<img src="https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" height="20"/>
</div>
</div>
#table
{
display:table;
height:103px;
}
#cell1, #cell2
{
display:table-cell;
}
#cell1
{
width:50%;
height:103px;
background-color:green;
}
#sub-cell1
{
width:100%;
height:103px;
display:inline-block;
}
#cell2
{
width:1000px;
height:103px;
background-color:red;
}
Could anybody explain me why the image is not positioned on the top left side in the second div here? It works as expected if image is removed or if the sub-div is removed or if "height" attribute of the sub-div is removed.
table behave in such way to center elements vertically
The solutions might be
1) you can add vertical-align: top; to the cell
2) use absolute positioning for the image
#cell2
{
width:1000px;
height:103px;
background-color:red;
vertical-align: top;
}
http://jsfiddle.net/DQFja/539/
Try the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.table {
display: table;
width: 100%;
}
.tableRow {
display: table-row;
}
.tableCell {
display: table-cell;
height: 103px;
}
.tableCell:first-child {
background-color: green;
width: 50%;
}
.tableCell:last-child {
background-color: red;
}
img {
height: 20px;
}
</style>
</head>
<body>
<div class="table">
<div class="tableRow">
<div class="tableCell">
<div class="subDiv">
</div>
</div>
<div class="tableCell">
<img src="https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="" />
</div>
</div>
</div>
</body>
</html>
https://jsfiddle.net/8r262g29/
Related
So I have to make an template of website which should look like
that
But I have problem with floating div's. I have to make like three div's
1: "global" div which is called 1 on upper picture that I linked
2: it's just an menu
3: is div which should display some text by clicking on menu articles
For now,my template looks like that. How I may set those two div's (red, and yellow one) in same line?
body {
background-color: green;
}
#baner {
background-color: black;
height: 500px;
width: 100%;
}
#menu {
background-color: red;
width: 40%;
height: 30%;
}
#zawartosc {
background-color: yellow;
width: 60%;
height: 70px;
float: right;
}
<div id="baner">
<img src="baner.jpg" width="30%" height="60%" />
<div id="menu">
MENU</br>
Opis</br>
Jaka to liczba?</br>
Liczby całkowite z wykresu
</div>
<div id="zawartosc">asd</div>
</div>
I suggest a parent div.
body{
background-color:green;
}
#baner{
background-color:black;
height:500px;
width:100%;
}
.bottom{
width:100%;
position:relatvie;
}
#menu{
background-color:red;
width:40%;
height:30%;
float:left;
}
#zawartosc{
background-color:yellow;
width:60%;
height:70px;
float:left;
}
<!DOCTYPE HTML>
<html>
<body>
<div id="baner">
<img src = "baner.jpg" width="30%" height="60%"/>
<div class="bottom">
<div id="menu">
MENU</br>
Opis</br>
Jaka to liczba?</br>
Liczby całkowite z wykresu
</div>
<div id="zawartosc">asd</div>
</div>
</div>
</body>
</html>
.main{
width:100%;
height:100px;
background-color:black;
color:white;
text-align:center;
}
.left{
width:50%;
height:50px;
background-color:green;
float:left;text-align:center;
}
.right{
width:50%;
height:50px;
background-color:red;
float:left;
text-align:center;
}
<div class="main">hello</div>
<div class="left">green</div>
<div class="right">red</div>
for next div you should clear the floats using clear:both
If you just float #zawartosc then it will start new line because before this there is a block level element (#menu) which will take whole available width. So you have to float both #menu and #zawartosc div if you want both in same line. Notice that img element is inline element. so if you dont use a wrapper of floating element then you have to set img element to display block
body{
background-color:green;
}
#baner{
background-color:black;
height:500px;
width:100%;
}
#menu{
background-color:red;
width:40%;
height:30%;
}
#zawartosc{
background-color:yellow;
width:60%;
height:70px;
}
#menu,#zawartosc {
float:left;
}
img {
display:block;
}
<!DOCTYPE HTML>
<html>
<head>
<link rel="Stylesheet" type="text/css" href="test.css"/>
</head>
<body>
<div id = "baner">
<img src = "baner.jpg" width="30%" height="60%"/>
<div id = "menu">
MENU</br>
Opis</br>
Jaka to lic
zba?</br>
Liczby całkowite z wykresu
</div>
<div id = "zawartosc">asd</div>
</div>
</body>
</html>
If use a wrapper div then you don't set img element to display block. Like this
body{
background-color:green;
}
#baner{
background-color:black;
height:500px;
width:100%;
}
#menu{
background-color:red;
width:40%;
height:30%;
}
#zawartosc{
background-color:yellow;
width:60%;
height:70px;
}
#menu,#zawartosc {
float:left;
}
<!DOCTYPE HTML>
<html>
<head>
<link rel="Stylesheet" type="text/css" href="test.css"/>
</head>
<body>
<div id = "baner">
<img src = "baner.jpg" width="30%" height="60%"/>
<div class = 'wrapper'>
<div id = "menu">
MENU</br>
Opis</br>
Jaka to lic
zba?</br>
Liczby całkowite z wykresu
</div>
<div id = "zawartosc">asd</div>
</div>
</div>
</body>
</html>
Hope this will help you.
Css has moved on from using floats to position things to the left and right (plus floats were only ever designed to be used for positioning images within text but where abused for a lack of a better way to position things)
Instead of floating your divs, I would use flexbox - this also has the added benefit that your left and right divs will become equal height:
body {
background-color: green;
}
#baner {
background-color: black;
height: 500px;
width: 100%;
display:flex; /* this is optional, but I added it to make the container below fill the vertical space */
flex-direction:column; /* aligns children in a column */
}
.container {
display:flex; /* add this so menu and zawartosc are aligned in a row - default flex direction is row */
flex-grow:1; /* this just says fill the resat of the space - in this case the vertical space of baner */
}
#menu {
background-color: red;
width: 40%; /* this can be a fixed width if you want - menus don't usually grow in size so best to make the content column fluid rather than both content and menu */
}
#zawartosc {
background-color: yellow;
flex-grow: 1; /* make this grow to fill the rest of the row */
}
<div id="baner">
<img src="baner.jpg" width="30%" height="60%" />
<div class="container"> <!-- wrap below divs in a container -->
<div id="menu">
MENU</br>
Opis</br>
Jaka to liczba?</br>
Liczby całkowite z wykresu
</div>
<div id="zawartosc">asd</div>
</div>
</div>
More information about flexbox
Useful Flexbox playground Codepen
If you want to continue using floats, then you either have to float the menu left, or move zawartosc before menu in your html - but don't forget to clear your floats too (probably why you have added a fixed height to baner)
I am building a horizontal timeline using absolutely positioned divs.
However I am having an issue where the labels for each div overlap when the dates are too close together. You can see this in the following Plunker (label one and label two overlap)
https://plnkr.co/edit/fhff4V6Zo8ko2Sllv2DZ?p=preview
I need to put in some sort of margin, however I am not sure how to do this given the width's will be created dynamically (based on a certain date value)
Any advice would be great!
HTML
<div class='timeline' style='width:100%;position:relative'>
<div class='one timeline-milestone'>
<div class='timeline-label'>
Label One
</div>
</div>
<div class='two timeline-milestone'>
<div class='timeline-label'>
Label Two
</div>
</div>
<div class='three timeline-milestone'>
<div class='timeline-label'>
Label Three
</div>
</div>
<div class='four timeline-milestone'>
<div class='timeline-label'>
Label Four
</div>
</div>
</div>
CSS
.timeline-milestone {
height:10px;
margin-bottom:20px;
width:10%;
text-align:right;
position:absolute;
}
.one {
width:10%;
}
.two {
width:15%;
}
.three {
width:50%;
}
.four {
width:90%;
}
Plunker
https://plnkr.co/edit/fhff4V6Zo8ko2Sllv2DZ?p=preview
Add the following css:
.timeline{
display: table;
}
.timeline-milestone {
display: table-cell;
height:10px;
width: auto;
text-align:right;
}
Converting it to a table will ensure that they never overlap. The display:table and table-cell will handle dynamic widths automatically.
Updated plunker
you gave 100% in main block and total subblock shoul be below or equal to 100% , if it exceeds it will happen , try this code..
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div >
<table style='width:100%;position:relative'>
<tr>
<td style='width:25%;position:relative'>
<div>
<div>
Label One
</div>
</div>
</td>
<td style='width:25%;position:relative'>
<div>
<div>
Label Two
</div>
</div>
</td>
<td style='width:25%;position:relative'>
<div >
<div >
Label Three
</div>
</div>
</td>
<td style='width:25%;position:relative'>
<div >
<div >
Label Four
</div>
</div>
</td>
</tr>
</table>
You can just alter your css and put this and it will never overlay
/* Styles go here */
.timeline-milestone {
height:10px;
margin-bottom:20px;
width:10%;
text-align:right;
position:absolute;
}
.one {
margin-left: 0%;
}
.two {
margin-left: 33.5%;
}
.three {
margin-left: 66.5%;
}
.four {
margin-left: 100%;
}
I want the input to be width: 100%; and be on the right of the image.
Is it possible without using a table? If it is how can I achieve that?
HTML:
<div class="wrapper">
<img src="http://www.iconpot.com/icon/thumbnail/geek-avatar.jpg" />
<input/>
</div>
CSS:
input {
width:100%;
float:left;
}
FIDDLE
Thank you
You could do this with calc()
FIDDLE
input
{
width: calc(100% - 130px); /* width of img + extra padding between */
}
You could also align the input by styling the img
img
{
vertical-align: middle; /* or top /bottom.. etc */
}
Demo: http://jsfiddle.net/abhitalks/DL8kG/9/
Idea:
Wrap your image and input in their own containers. Use display: table-cell on containers. Use vertical-align: middle to line up. This will allow you to have 100% width.
Markup:
<div class="wrapper">
<div class="imgWrap">
<img src="http://www.iconpot.com/icon/thumbnail/geek-avatar.jpg" />
</div>
<div class="inputWrap">
<input/>
</div>
</div>
CSS:
div.wrapper {
width: 100%;
}
.imgWrap {
display: table-cell;
}
.inputWrap {
display: table-cell;
width: 100%;
vertical-align: middle;
padding: 4px;
}
input {
width: 100%;
}
Use a floating and overflow trick. Float your image to the left and place your input in a container that will have its overflow hidden. Give the input a width of 100%. The input's container will take up the remainder of the screen (what I assume you mean by 100%):
HTML
<div class="wrapper">
<img src="http://www.iconpot.com/icon/thumbnail/geek-avatar.jpg" />
<div class="inp"><input/></div>
</div>
CSS
img{
float:left;
}
.inp{
overflow:hidden;
background:#F00;
}
.inp input{
width:100%;
}
JSFiddle
Please take note of how your default styles (padding, border..) will affect the total width of the input.
<div class="wrapper">
<div id="img">
<img src="http://www.iconpot.com/icon/thumbnail/geek-avatar.jpg" />
</div>
<div id="input">
<input/>
</div>
</div>
CSS
#input {
display:table-cell;
}
input{
width:100%;
float:left;
}
#img {
width:130px;
float:left;
border:1px solid black;
display:table-cell;
}
Fiddle
<div class="wrapper">
<img src="http://www.iconpot.com/icon/thumbnail/geek-avatar.jpg" style="float:left"/>
<div style="float:left">
<input />
</div>
I need 3 column layout, first and 3rd column sizes are variable because there will be image or some variable length text(or another image) but i need middle to fill the rest space with background image, something like this if it would work like i imagine :
HTML:
<div class="left-vp">
<img src="~/Content/images/vp1.png" />
</div>
<div class="mid-vp">
</div>
<div class="right-vp">
<p>
//some text here or another img
</p>
</div>
CSS
.left-vp {
float: left;
}
.mid-vp {
height: 2px;
background: #FFFFFF url("images/dot.png") repeat-x;
width: 100%;
}
.right-vp {
float: right;
}
Is something like this possible with CSS?
If you have control of the markup, and don't mind making changes, you can use table block styles to accomplish this. It's the only way I know of which will handle all scenarios and resizing.
HTML
<div class="container">
<div>
<div class="col col1">
<div class="nowrap">Column 1</div>
</div>
<div class="col col2 fill center">
<div class="nowrap">Column 2</div>
</div>
<div class="col col3">
<div class="nowrap">Column 3</div>
</div>
</div>
</div>
CSS
.container { width: 100%; }
.container { display: table; }
.container > div { display: table-row; }
.container > div > div { display: table-cell; }
.container > div > div { padding: .5em; }
.container .nowrap { white-space: nowrap; }
.container .fill { width: 100%; }
.container .center { text-align: center; }
.col1 { background: red; }
.col2 { background: blue; }
.col3 { background: green; }
In action: http://jsfiddle.net/Vxc3n/1/
A few things to keep in mind:
If your first and 3rd columns contain text, you will need to wrap them in a DIV which has the white-space: no-wrap CSS style
If you have more than 1 fill column, ensure the width total = 100% (eg, 2 columns, use 50%)
You won't be able to shrink the columns beyond the minimum required width
HTML
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
CSS
#container{width:100%;}
#left{float:left;width:100px; height: 100px; background-color: gray;}
#right{float:right;width:100px; height: 100px; background-color: green;}
#center{margin:0 auto;width:100%; height:100px; background-color: blue;}
in action -> http://jsfiddle.net/5xfR9/39/
I'm not sure what your actual requirements are for that central column but if it's just to contain a background as in the question could you not move the background styles to the container itself?
As an expansion on Eriks' jsfiddle: http://jsfiddle.net/5xfR9/46/
HTML
<div id="container" class="clearfix">
<div id="left">some text</div>
<div id="right">some text</div>
</div>
CSS
#container{ width:100%; background-color: blue; }
#left{ float:left; height: 100px; background-color: red; }
#right{ float:right; height: 100px; background-color: green; }
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
I've added a clearfix class to make sure the container actually contains the columns so that the background can show through (this is the clearfix class from a version of HTML5 Boilerplate).
You just need to play around with min-width and max-width properties until you get what you want. And it seems to work easiest when you give the columns a max-width as a percentage of the body or a wrap.
Here is a working example i put together:
http://jsfiddle.net/76Ep3/1/
HTML
<div id="wrap">
<div id="left">LEFT content...</div>
<div id="center">CENTER content...</div>
<div id="right">Right content</div>
</div>
CSS
*{margin:0;padding:0;}
body, html{
height:100%;
}
#wrap {
min-width:390px;
height:100%;
}
#left{
float:left;
min-width:100px;
max-width:37%;
margin:0 auto;
background-color:blue;
height:100%;
}
#center {
float:left;
min-width:100px;
max-width:20%;
background-color:red;
height:100%;
}
#right {
float:left;
min-width:100px;
max-width:37%;
background-color:yellow;
height:100%;
}
I am trying to make an html page with 2 divs : "top" and "main"
The top <div> must take the place of its contained elements, the main <div> must take all the remaining place.
Here is what I tried:
CSS CODE :
html,body{
height:100%;
}
#top{
background-color : red;
padding:10px;
border:1px solid;
}
#main{
background-color : blue;
height:100%;
padding:10px;
border:1px solid;
}
#content1{
background-color:yellow;
}
#content2{
background-color:yellow;
height :100%;
}
HTML CODE:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="top">
<div id="content1">content1</div>
</div>
<div id="main">
<div id="content2">content2</div>
</div>
</body>
</html>
Here is the jsFiddle
As you can see, the "100%" I set on "content2" causes this div to take 100% of the page height instead of just the remaining space. Is there a magic css property to fix this?
EDIT:
Thank you for all your solutions.
I finally chose the solution proposed by Riccardo Pasianotto based on CSS properties display:table and display:table-row.
Here is my final HTML CODE:
<!DOCTYPE html>
<body>
<div id="content1" class="row">
<div class="subcontent">
<div class="subContentContainer">
content1
</div>
</div>
</div>
<div id="content2" class="row">
<div class="subcontent">
<div class="subContentContainer">
content2
</div>
</div>
</div>
</body>
Here is the corresponding CSS CODE:
html,body{
padding:0;
margin:0;
height:100%;
width:100%;
}
body{
display:table;
}
.row{
display:table-row;
width:100%;
}
#top{
height:100px;
}
#content1{
background:#aa5555;
padding:10px;
}
#content2{
background:#5555AA;
height:100%;
}
.subcontent{
padding : 10px;
height:100%;
}
.subContentContainer{
background-color:yellow;
height:100%;
}
And here is the corresponding Jsfiddle.
DEMOJF
For doing this you have to use display:table so edit in that way
html,
body {
height: 100%;
width: 100%;
}
body {
display: table;
}
.row {
display: table-row;
width: 100%;
background: red;
}
#top {
height: 100px;
}
#content1 {
background: yellow;
height: 100%;
}
#content2 {
overflow: scroll;
height: 100%;
border: 1px solid black;
}
<body>
<div id="top" class="row">
<div id="content1">content1</div>
</div>
<div id="main" class="row">
<div id="content2">content2</div>
</div>
</body>
What I often do is making a container without padding to min-height: 100% and let my content have its proper height (auto) :
This will make something like this :
#container {
background-color : #5555AA;
min-height: 100%;
}
#content2 {
background-color:yellow;
margin: 10px;
}
http://jsfiddle.net/5cEdq/25/
I don't know if this is exactly what you want, but you can't make a div just "fill the remaning space" without making it absolute. What you don't really want either.
try this:
http://jsfiddle.net/5cEdq/16/
CSS :
html,body{
height:100%;
Padding:0;
margin:0;
border:0;}
Since both Divs are using 100% height set on the html and body tag you only need to set it there then zero your margin and padding. Generally if you have to set a div and its parent div both to 100% height you're overdoing it.
Is there a magic css property to fix this?
Yes there is. It's called box-sizing
Read this article for more info about the box-sizing property.
FIDDLE
So if your header was say 64px high, then you'd do something like this:
.container {
height: 100%;
background: pink;
margin-top: -64px;
padding-top: 64px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<header>header</header>
<div class="container">
<div class="content">
content here
</div>
</div>