Maybe anyone could help me with divs structure which would represent image above and if there are any special css parameters of holder div, or other add them too?
The are many ways to do that, one of them is with relative-float
<div style="position:relative">
<div style="float:left; width: 50px; height:100px; background-color:red;">Block1
</div>
<div style="float:left; width: 50px; height:100px; background-color:blue;">Block2
</div>
<div style="float:left; width: 50px; height:100px; background-color:green;">Block3
</div>
</div>
This generates something like
How about:
<div>a</div>
<div>b</div>
<div>c</div>
with CSS:
div {
width: 33%;
border: 1px solid red;
float: left;
}
?
If you are asking for html code to get the visual done as shown in your question, this is the place http://csslayoutgenerator.com/, where you can generate the html layouts.
three div :
<div></div><div></div><div></div>
with css :
div {
display: inline-block;
}
put into these div all content you want.
You can also use float:left instead of display property.
If you want a liquid layout (first and last div have a fixed width and the middle one take all the needed space), you can :
.firstDiv {
float: left;
width: 200px;
}
.lastDiv {
float: right;
width: 200px;
}
.middleDiv {
margin-left: 200px;
margin-right: 200px;
}
you can also use absolute positioning :
body {
position: relative;
}
.firstDiv {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
width: 200px;
}
.lastDiv {
position: absolute;
top: 0px;
bottom: 0px;
left: 200px;
right: 200px;
}
.middleDiv {
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
width: 200px;
}
Working Fiddle
CSS:
.div {
display:inline-block;
width:150px;
height:400px;
margin:0;
}
#one {
background:green;
}
#two {
background:red;
}
#three {
background:blue;
}
HTML:
<div class="div" id="one"></div>
<div class="div" id="two"></div>
<div class="div" id="three"></div>
You can use CSS display property. And Specifying inline-block.
Take look at this JS Fiddle code:
<div class="_1">Red</div>
<div class="_2">Green</div>
<div class="_3">Blue</div>
div {
display:inline-block;
width:100px;
height:200px;
}
._1 {
background-color:red;
}
._2 {
background-color:green;
}
._3 {
background-color:blue;
}
Related
I've tried many things but i can not figure out how to put div2 on the bottom of the div1 I want top part of div2 to be inside of the div1 bottom side
Like this
Any suggestions please?
https://jsfiddle.net/njwq14vu/13/
Here's what you're looking for:
.div1 {
background: red;
height: 50px;
width: 120px;
}
.div2 {
background: blue;
height: 50px;
width: 100px;
top: -10px;
position: relative;
}
<div class="container">
<div class="div1">Helo</div>
<div class="div2">Helo1</div>
</div>
What changed:
.div2 has top property set to -10px, in order to show it 10 pixels before than first;
.div2 has also position property set to relative, that allow the HTML element to override his design default behaviour (static).
try this instead,
add relative positioning to container div
.container{
position:relative;
}
and absolute positioning to div2
.div2{
position:absolute;
top:30px;
left:15px;
}
.div1 {
background:red;
height:50px;
width:150px;
}
.div2 {
background:blue;
height:50px;
width:120px;
position:absolute;
top:30px;
left:15px;
}
.container{
position:relative;
color:#fff;
text-align:center;
}
<div class="container">
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
</div>
From your question (div2 to be inside of the div1), I unedrstand you want to overlap..
Is this the kind ouf Output you are looking for?
You can use Position: Absolute; in your css code to achieve this.
CSS below:
.div1 {
background:red;
height:50px;
width:120px;
}
.div2 {
position: absolute;
top: 40px;
left: 20px;
background:blue;
height:50px;
width:120px;
You can operate left and right attributes as desired for your design.
.container{
position: relative;
}
.div1 {
background: red;
height: 50px;
width: 120px;
}
.div2 {
background: blue;
height: 50px;
width: 100px;
position: absolute;
left: 0;
right: 0;
top: 30px;
}
<div class="container">
<div class="div1">Helo</div>
<div class="div2">Helo1</div>
You can use position absolute on your div2 with left and top to make sure it stays on top of div1
Live Demo:
.div1 {
background: red;
height: 50px;
width: 120px;
}
.div2 {
background: blue;
height: 50px;
width: 110px;
position: absolute;
top: 2.5em;
left: 0.8em;
}
<div class="container">
<div class="div1">Helo</div>
<div class="div2">Helo1</div>
</div>
Please let me know if this helps you. I have added two attributes to .div2 class keeping your code intact.
.div1 {
background:red;
height:50px;
width:120px;
}
.div2 {
background:blue;
height:50px;
width:120px;
position: relative;
top: -10px;
}
<div class="container">
<div class="div1">Helo</div>
<div class="div2">Helo1</div>
</div>
Wrap your div in another div, and then use flex's 'order' property like so
.example {
display: flex;
flex-direction: column;
}
.example > .a {order: 3; } /* Will be displayed third */
.example > .b {order: 2; } /* Will be displayed second */
.example > .c {order: 1; } /* Will be displayed first */
<div class="example">
<div class="a">First</div>
<div class="b">Second</div>
<div class="c">Third</div>
</div>
I want to make a vertical line between two divs. we have hr for horizontal line but none for vertical line as I know. Is there anyway to make it without using border?
<style>
#wrapper_1 {
background-color:pink;
height:100px;
float:left;
width: 100px;
}
#wrapper_2 {
background-color:brown;
height:100px;
width: 100px;
float:right;
}
</style>
<div id="wrapper_1">
Creating slideshows PHP
</div>
<div id="wrapper_2">
Creating slideshows with WordPress
</div>
You can also use pseudo elements to make a vertical separator. You don't need an extra div to make a separator just use the pseudo elements and style it according to your needs.
#wrapper_1 {
background-color: pink;
height: 100px;
float: left;
width: 100px;
}
#wrapper_1:after {
content: "";
background-color: #000;
position: absolute;
width: 5px;
height: 100px;
top: 10px;
left: 50%;
display: block;
}
#wrapper_2 {
background-color: brown;
height: 100px;
width: 100px;
float: right;
}
<div id="wrapper_1">
Creating slideshows PHP
</div>
<div id="wrapper_2">
Creating slideshows with WordPress
</div>
PS: Beware of the absolute positioning of the pseudo elements.
Thanks.
You can use <hr>, as it is semantically correct, and then use CSS to convert it to a vertical line.
hr.vertical {
height:100%; /* you might need some positioning for this to work, see other questions about 100% height */
width:0;
border:1px solid black;
}
Create a new div between your two div and add this class:
.vertical-row {
Float:left;
height:100px;
width:1px; /* edit this if you want */
background-color: your color
}
I am not a css hacker but this is how would I do it.. Please notice that you should use clear: both; after floating elements.
HTML:
<div class="container">
<div id="wrapper_1">
Creating slideshows PHP
</div>
<div class="seperator"></div>
<div id="wrapper_2">
Creating slideshows with WordPress
</div>
<div class="clearfix"></div>
</div>
CSS:
#wrapper_1 {
background-color:pink;
height:100px;
float:left;
width: 100px;
}
#wrapper_2 {
background-color:brown;
height:100px;
width: 100px;
float:right;
}
.seperator {
height: 100%;
width: 1px;
background: black;
top: 0;
bottom: 0;
position: absolute;
left: 50%;
}
.container {
position: relative;
}
.clearfix {
clear: both;
}
DEMO: jsfiddle
sure you can:
just wrap the elements into a wrapper and make that one display:table-cell.
.bigwrapper{
display:table;
width:100%;
}
second: create another div width class "vr" between your two wrappers and style it as follows:
.vr{
width:1px;
display:table-cell;
background-color:black;
height:100%;
}
Final Demo at:
https://plnkr.co/edit/uJsmrCaF9nns49J5RcYj?p=preview
If you are using flex element and you are having issues with element(s) transforming to columns because of the display: flex; property, use the box-shadow property on the element as it does not add up to the container space.
Have problem. I have this code.
<div class="main">
<div class="sidebar"></div>
<div class="content"></div>
</div>
I need to make two colums.
"Sidebar" must have fixed width 200px;
And "content" all remaining width to fullscreen.
I cant change the structure of html code, just css.
if absolute position is ok, you can use it to say left:200px; right:0 and get all the space you need
fiddle : http://jsfiddle.net/h2udmqhn/
.main {
position: relative;
height: 300px;
width: 300px;
border: 1px solid black;
}
.sidebar {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: red;
}
.content {
position: absolute;
top: 0;
left: 200px;
right: 0;
height: 200px;
background: blue;
}
<div class="main">
<div class="sidebar"></div>
<div class="content"></div>
</div>
Use float: left for .sidebar and left margin for .content:
.sidebar {float: left; width: 200px; background: red;}
.content {background: green; margin: 0 0 0 200px;}
http://jsfiddle.net/orty5qtj/1/
Another option is to use calc, which is unsupported in IE8. The solution above works fine in all browsers.
Try this :
.sidebar {
float: left;
min-height: 50px;
background: red;
width: 200px;
}
.content {
background : yellow;
margin-left: 200px;
min-height: 50px;
}
https://jsfiddle.net/Saiyam/5krmkkkx/3/
There a couple of simple ways to do this without the need for calc, margins or absolute positioning. Both of the following ways have the added bonus of keeping the columns the same height as each other
Using display table (compatible to back ie8)
.main {
display: table;
width: 100%;
}
.main > div {
display: table-cell;
}
.sidebar {
width: 200px;
background: blue;
}
.content {
background: red;
}
<div class="main">
<div class="sidebar">200px</div>
<div class="content">the rest</div>
</div>
Using flex (for newer browsers only unless used with the browser prefix):
.main {
display: flex;
width:100%;
max-width:100%;
}
.sidebar {
width: 200px;
flex: 0 0 200px;
background-color:blue;
}
.content {
background-color:red;
flex: 1 0 auto;
}
<div class="main">
<div class="sidebar">200px</div>
<div class="content">the rest</div>
</div>
We try to center a CSS circle with a image and a label overlaying the circle. The circle should be horizontally centered in a bootstrap column. Goal is to have this circle always in the horizontal center. Any advise is welcome.
Please see following JSFIDDLE
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="circle1Wrapper">
<div class="circle-textSmall bubble1outer">
<div> <span class="bubbleIconSmall">
<img src="http://lorempixel.com/40/40/" />
</span><span class="bubbleHeadSmall">label</span>
</div>
</div>
</div>
</div>
<div class="col-md-4"></div>
</div>
CSS:
.circle1Wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 9999;
margin: auto;
border: 1px solid;
}
.bubble1outer {
position: absolute;
}
.circle-textSmall div {
width: 125px;
}
.circle-textSmall div {
float: left;
width: 250px;
padding-top: 15%;
line-height: 1em;
margin-top: -0.5em;
text-align: center;
color: #000;
}
span.bubbleIconSmall > img {
width: 45%;
height: auto;
}
.circle-textSmall:after {
width: 125px;
padding-bottom: 125px;
margin-left: 50%;
}
.circle-textSmall:after {
content:"";
display: block;
width: 250px;
height: 0;
padding-bottom: 250px;
background: #ccc;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
It should look like this:
#metaxos, I wanted to put this as a comment, but it is a bit long.
Even when you found a solution that works for you, I think that you may want to consider cleaning that code a bit; look how the original example got rid of most of the code and just kept one div:
.innerwrapper is unnecessary (why not put that style directly on #myCircleDiv?);
Same thing for the div that holds the image (you could put that style directly on the image!);
And the img itself can go too (and use it as background of #myCircleDiv).
This is my opinion (feel free to ignore it), but I think you should aim for something cleaner and easier to maintain, rather than a more complex and elaborated (but unnecessary) structure (unless it is required by the user/customer). The simpler, the better.
In that sense, this (you can see it working on this jsfiddle):
<!-- HTML -->
<div id="myCircleDiv">LABEL</div>
/* CSS */
#myCircleDiv {
width:250px;
height:250px;
border-radius:50%;
display:inline-block;
line-height:375px;
text-align:center;
color:white;
background:url("http://lorempixel.com/50/50/") #ccc no-repeat 50% 38px;
}
Looks beter than this:
<!-- HTML -->
<div id="myCircleDiv">
<div class="innerWrapper">
<div>
<img src="http://lorempixel.com/50/50/" />
</div>
<div>LABEL</div>
</div>
</div>
/* CSS */
#myCircleDiv {
width:250px;
height:250px;
border-radius:50%;
display:inline-block;
background-color:#ccc;
background-size:250px 250px;
line-height:250px;
text-align:center;
color:white;
}
.innerWrapper {
width: 100%;
height: 250px;
}
.innerWrapper div {
float: left;
height: 125px;
width: 100%;
line-height: 125px;
}
.innerWrapper div img {
margin-top: 38px;
}
And the result is exaclty the same. But again... that's my opinion :)
I am trying to make 3 div's in row design. Where the header and footer have fixed height.
The center div expands to fill the empty space. I have tried but the closest I got is the code below. Still having problems with the center div which expands over the footer div.
html:
<div id='container'>
<div id='rowOne'>row 1</div>
<div id='rowTwo'>row 2</div>
<div id='rowThree'>row 3</div>
</div>
css:
#rowOne {
width: 100%;
height: 50px;
background: green;
}
#rowTwo {
width: 100%;
background: limegreen;
height:100%;
overflow:hidden;
}
#rowThree {
width: 100%;
position: fixed;
clear: both;
background: green;
position:absolute;
bottom:0;
left:0;
height:50px;
}
#container {
height: 100%;
}
Three Row pure CSS
I know this post is getting on a bit, but despite claims to the contrary, you can do this very simply with CSS. No need for JavaScript, jQuery, CSS 3 hacks etc.
Here's a couple of jsf's that show fixed header and footer and dynamic body div.
This first one shows fixed pixel height header and footer and dynamic body EXACTLY as you wanted in your image
http://jsfiddle.net/LBQ7K/
<body>
<div class="header"><p>Header</p></div>
<div class="cssBody"><p>Hello World</p></div>
<div class="footer"><p>Footer</p></div>
</body>
html, body, {
height: 100%;
}
.header {
position: absolute;
top: 0px;
height: 50px;
width: 100%;
background: #f00;
}
.footer {
position: absolute;
bottom: 0;
height: 50px;
width: 100%;
background: #00f;
}
.cssBody {
position: absolute;
top: 50px;
bottom: 50px;
width: 100%;
background: #0f0;
}
The second shows you can use the same technique to have dynamic headers & footers.
http://jsfiddle.net/reqXJ/
<body>
<div class="header"><p>Header</p></div>
<div class="cssBody"><p>Hello World</p></div>
<div class="footer"><p>Footer</p></div>
</body>
html, body, {
height: 100%;
}
.header {
position: absolute;
top: 0px;
height: 15%;
width: 100%;
background: #f00;
}
.footer {
position: absolute;
bottom: 0;
height: 15%;
width: 100%;
background: #00f;
}
.cssBody {
position: absolute;
top: 15%;
bottom: 15%;
width: 100%;
background: #0f0;
}
This is a very common problem, one of the solutions that worked for me is from the following website:
http://ryanfait.com/sticky-footer/
with the code:
http://ryanfait.com/sticky-footer/layout.css
and another popular choice:
http://www.cssstickyfooter.com/
If this does not meet your needs, let us know, we can help more.
Seems like you are try to do a sticky footer, well... you will need a few hacks:
HTML:
<div id='container'>
<div class="header">
<h1>Sticky Footer!</h1>
</div>
<div id='rowOne'>row 1</div>
<div id='rowTwo'>row 2</div>
<div id='rowThree'>row 3</div>
<div class="push"></div>
</div>
<div id='footer'></div>
CSS
.container {
min-height: 100%;
height: auto !important;height: 100%;
/* the bottom margin is the negative value of the footer's height */
margin: 0 auto -142px;
}
.footer, .push{
height: 142px; /* .push must be the same height as .footer */
}
Note: Replace the footer and push height for your fixed height and don't forget to insert the push div after the rows in the container.
You can fake this by absolutely positioning the rows, and adding padding to top and bottom for the middle row. You cannot do this like you were doing with tables
#container { position:relative; height:800px } // needs height
#rowOne, #rowTwo, #rowThree { position:absolute }
#rowOne { top:0; left:0 }
#rowThree { bottom:0; left:0 }
#rowTwo { left:0; top:0; padding:50px 0; } // top and bottom padding 50px
could this line of code help?
DEMO
Try this:
#container{
...
position:relative;
}
#content{
min-height: xxx;
}
This should exactly do what you want:
html code:
<div id="header">
header
</div>
<div id='container'>
<div id='rowOne'>one</div>
<div id='rowTwo'>two</div>
<div id='rowThree'>three</div>
</div>
<div class="clearfix"></div>
<div id="footer">
footer
</div>
CSS code:
.clearfix {
clear: both;
}
#header, #footer {
background-color: red;
}
#container {
width: 100%;
}
#rowOne {
width: 25%;
background: green;
float: left;
}
#rowTwo {
width: 55%;
height: 100px;
background: limegreen;
float: left;
}
#rowThree {
width: 20%;
background: green;
float: left;
}
You can also test it on jsFiddle
Have you tried looking at a CSS framework? They come with default classes you can use to set up something like that within a few short minutes. They also help producing cleaner html and interfaces that you can easily redesign at a later time.
http://twitter.github.com/bootstrap/index.html
I hope you are looking like this :- DEMO
CSS
#container {
height: 100%;
}
#rowOne {
height: 50px;
background: green;
position:fixed;
left:0;
right:0;
}
#rowTwo {
background: limegreen;
min-height:500px;
position:absolute;
left:0;
right:0;
top:50px;
}
#rowThree {
position: fixed;
background: green;
bottom:0;
left:0;
right:0;
height:50px;
}
HTML
<div id='container'>
<div id='rowOne'>row 1</div>
<div id='rowTwo'>row 2</div>
<div id='rowThree'>row 3</div>
</div>
In response to your comment on jedrus07's answer:
all this sollutions expand the center div behind the footer div. I want a solution with each div having only his own space.
The only way to do that is with CSS 3 calc(). If you don't need to support very many browsers, that's an option, and here's a demo of it in action:
http://jsfiddle.net/5QGgZ/3/
(Use Chrome or Safari.)
HTML:
<html>
<body>
<div id='container'>
<div id='rowOne'>row 1</div>
<div id='rowTwo'>row 2</div>
<div id='rowThree'>row 3</div>
</div>
</body>
</html>
CSS:
html, body, #container {
height: 100%;
}
#rowOne {
height: 50px;
background: #f00;
}
#rowTwo {
height: -webkit-calc(100% - 100px);
background: #0f0;
}
#rowThree {
height: 50px;
background: #00f;
}
If you want wider browser support, you're going to have to go with a sticky footer solution like the ones jedrus07 mentioned, or Tom Sarduy's answer.
One way would be using Jquery to set the minimum height of the middle div to be the height of the screen, minus the height of the other two divs (100px)
something like this should work:
$(document).ready(function() {
var screenHeight = $(document).height() - 100px;
$('#rowTwo').css('min-height' , screenHeight);
});