I have this layout (which is a header):
<div class="container-fluid">
<div class="row">
<div class="col-sm-2" style="background-color: aqua; height: 160px;">
<img src="logo.png" class="img-responsive logo">
</div>
<div class="col-sm-8" style="background-color: blueviolet; height: 160px;"></div>
<div class="col-sm-2" style="background-color: aqua; height: 160px;"></div>
</div>
</div>
what i would like to achieve is:
Align the logo to the bottom and the center
Let the image be responsible (set width to 80% of the column)
I did this:
.logo {
position: absolute;
width: 80%;
left: 10%;
right: 10%;
bottom: 0;
}
but it somehow dosen't work as you can see here:
https://jsfiddle.net/9kauhbhs/2/
Use left: 50% and a margin left that is negative half of the image width.
e.g.
.logo {
position: absolute;
width: 80%;
left: 50%;
bottom: 0;
margin-left: calc(-80% / 2);
}
Fiddle
You can try this..
https://jsfiddle.net/9kauhbhs/7/
.container{
position:absolute;
bottom:0px;
height:auto;
width:100%;
text-align:center;
}
.logo {
position: relative;
width: auto;
height:auto;
margin:0 auto;
max-height:100%;
vertical-align:bottom;
}
<div class="col-sm-2 text-center" style="background-color: aqua; height: 160px;">
<div class="container">
<img src="http://www.w3schools.com/html/pic_mountain.jpg" class="logo">
</div>
</div>
Related
I have a series of images each with his own overlay. How can I have them aligned like inline-blocks? I tried adding adding display: inline-block;to .image-wrapper but the images are always all positioned in the top left corner of the div.container (Here is a jsfiddle).
Here are the html and css
.container {
position: relative;
}
.image-wrapper {
position: relative;
display: inline-block;
}
.tweetty {
position: absolute;
overflow: auto;
top: 0;
left: 0;
}
.image-vest {
position: absolute;
top: 0;
left: 0;
background-color: #00f;
width: 220px;
height: 300px;
opacity: 0.4;
color: #fff;
}
<div class="container">
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-one</div>
</div>
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-two</div>
</div>
</div>
EDIT:
revised css with dfsq suggestion to remove position:absolute; from .tweetty.
Quoting dfsq comment:
"Elements with position absolute don't contribute to the width and height of their parent container. So the image-wrapper divs just collapse as if they were empty if all children have position:absolute; "
.container {
position: relative;
}
.image-wrapper {
position: relative;
display: inline-block;
}
.tweetty {
overflow: auto;
top: 0;
left: 0;
}
.image-vest {
position: absolute;
top: 0;
left: 0;
background-color: #00f;
width: 220px;
height: 300px;
opacity: 0.4;
color: #fff;
}
<div class="container">
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-one</div>
</div>
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-two</div>
</div>
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-three</div>
</div>
</div>
I fiddled with the fiddle, and this seems to work. removed all the positioning from all but the vest. Used the inline-block display mode. Set top to -300px, and also the bottom-margin, otherwise you get a gap below the images.
.container {
/* position:relative;*/
}
.image-wrapper {
/* position: relative;*/
display: inline-block;
}
.tweetty {
/* position:absolute;
overflow:auto;
top:0;
left:0;*/
}
.image-vest {
position:relative;
top:-300px;
margin-bottom: -300px;
left:0;
background-color:#00f;
width:220px;
height:300px;
opacity:0.4;
color:#fff;
}
<div class="container">
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-one</div>
</div>
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-two</div>
</div>
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-three</div>
</div>
</div>
(here's the JSFiddle version)
So i have 3 box:
Box 1 = red
Box 2 = blue
Box 3 = yellow
Box 1 contains Box 2
Box 2 contains Box 3
Box3 are floated divs and have been cleared using extra div style="clear:both"
I want to have Box 2 as an absolute position to Box 1 like this :
http://i301.photobucket.com/albums/nn42/b1rk0ff/done_zpsd3cd25c0.png
I have tried like this but won't work :
Html :
<div class="box1">
<div class="box2">
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div style="clear:both;"></div>
</div>
testing
</div>
Style :
.box1 {
width:300px;
background-color: red;
position: relative;
}
.box2 {
width: 200px;
background-color:blue;
position: absolute;
right:-100px;
top:30px;
}
.box3 {
height:50px;
width: 50px;
background-color:yellow;
float:left;
margin:10px;
color:black;
}
Here's the codepen :
http://codepen.io/anon/pen/Kkirs?editors=110
Anybody could help?
Thank you
what about removing position:relative from .box1, and change position:absolute to .position:relative in .box2
See snipet below, and take a look at the comments in .box2
.box1 {
width: 300px;
background-color: red;
}
.box2 {
width: 200px;
background-color: blue;
position: relative;
right: -150px; /* changed this value to -150px » was -100px */
top: 10px; /* changed this value to 10px » was 30px */
padding:10px /* add padding as you need and if you need */
}
.box3 {
height: 50px;
width: 50px;
background-color: yellow;
float: left;
margin: 10px;
color: black;
}
<div class="box1">
<div class="box2">
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div style="clear:both;"></div>
</div>
testing
</div>
Why can't you just set a fixed height for .box1?
.box1 {
width:300px;
background-color: red;
position: relative;
height:250px;
}
.box2 {
width: 200px;
background-color:blue;
position: absolute;
right:-100px;
top:30px;
}
.box3 {
height:50px;
width: 50px;
background-color:yellow;
float:left;
margin:10px;
color:black;
}
<div class="box1">
<div class="box2">
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div style="clear:both;"></div>
</div>
testing
</div>
Just replace position: absolute by position: relative.
since box2 is absolute box 1 does not know the height of it's children,
you will need to revert to using both relative elements (or no position definition at all) and solve this problem with margin-left and margin-top
Thank you all, this is what i want.
Hope it helps another newbie like me. :)
.box1 {
width: 300px;
background-color: red;
}
.box2 {
width: 200px;
background-color: blue;
position: relative;
right: -150px; /* changed this value to -150px » was -100px */
top: 10px; /* changed this value to 10px » was 30px */
padding:10px /* add padding as you need and if you need */
}
.box3 {
height: 50px;
width: 50px;
background-color: yellow;
float: left;
margin: 10px;
color: black;
}
<div class="box1">
<div class="box2">
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div style="clear:both;"></div>
</div>
testing
</div>
.box1 {
width: 300px;
background-color: red;
}
.box2 {
width: 200px;
background-color: blue;
position: relative;
right: -150px; /* changed this value to -150px » was -100px */
top: 10px; /* changed this value to 10px » was 30px */
padding:10px /* add padding as you need and if you need */
}
.box3 {
height: 50px;
width: 50px;
background-color: yellow;
float: left;
margin: 10px;
color: black;
}
<div class="box1">
<div class="box2">
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div style="clear:both;"></div>
</div>
testing
</div>
I have seen examples of three columns (fixed fluid fixed). However, I need an example of a four column solution.
The two outer columns are fixed.
The two inner columns are fluid.
Fixed | Fluid | Fluid | Fixed
You can use calc.
.first, .last {
width: 300px;
}
.middle {
width: calc(50% - 300px);
}
You may want to apply vendor prefixes too.
HTML
<div id="framecontentLeft">
<div class="innertube">
<h1>Left Frame 1</h1>
</div>
</div>
<div id="framecontentRight">
<div class="innertube">
<h1>Right Frame 4</h1>
</div>
</div>
<div id="maincontent">
<div class="inner1">
<h1>Middle Frame 2</h1>
</div>
<div class="inner2">
<h1>Middle Frame 3</h1>
</div>
</div>
CSS
#framecontentLeft, #framecontentRight{
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100%;
background-color: navy;
color: white;
}
#framecontentRight{
left: auto;
right: 0;
width: 150px;
background-color: navy;
color: white;
}
#maincontent{
position: fixed;
top: 0;
left: 200px;
right: 150px;
bottom: 0;
background: #fff;
overflow: hidden;
}
.inner1{
height: 100%;
background:red;
width:50%;
float:left;
}
.inner2{
background:green;
height: 100%;
width:50%;
float:right;
}
DEMO
I like flexbox better than calc, if you can use it. It’s more… flexible.
<div id="container">
<div class="fixed">
Fixed
</div>
<div class="fluid">
Fluid
</div>
<div class="fluid">
Fluid
</div>
<div class="fixed">
Fixed
</div>
</div>
#container {
display: flex;
}
.fixed {
width: 15em;
}
.fluid {
flex: 1;
}
Dabblet. This, of course, makes all columns the same height, and if you can assume that, doing it without flexbox is also no problem given one more container (noting that if the fluid elements won’t necessarily be taller than the fixed ones, then you should give the inner container a max-height):
<div id="container">
<div class="fixed left">
Fixed
</div>
<!-- Fluid container! No, you don’t have to call it this. -->
<div class="bottle">
<div class="fluid">
Fluid
</div>
<div class="fluid">
Fluid
</div>
</div>
<div class="fixed right">
Fixed
</div>
</div>
#container {
position: relative;
}
.fixed {
bottom: 0;
position: absolute;
top: 0;
width: 15em;
}
.fixed.left {
left: 0;
}
.fixed.left {
right: 0;
}
.bottle {
margin: 0 15em;
overflow: hidden;
}
.fluid {
float: left;
width: 50%;
}
And, of course, if .bottle overflows, you’ll need some kind of clearing ::after.
demo: http://jsfiddle.net/57M68/. I have tried a lot of things like float, margin, padding but I can't get the textbox to align vertically in the center of the black strip. Please help. The code:
html:
<body class="claro" data-maq-flow-layout="true" data-maq-comptype="desktop" data-maq-ws="collapse" style="margin-top:0" data-maq-appstates="{}" id="myapp">
<div id="top_bar">
<div style="width: 900px; height:50px; margin-left: auto; margin-right: auto;">
<a href="/" class="logo logo_a">
<div class="logo">
</div>
</a>
<div style="display:inline-block"> <input type="text" ></input></div>
</div>
</div>
<div id="top_bar_divider"></div>
<div data-dojo-type="dijit.layout.BorderContainer" persist="false" gutters="true" style="min-width: 1em; min-height: 1px; z-index: 0; width: 600px; height: 687px; margin-left: auto; margin-right: auto;" design="headline">
<div data-dojo-type="dijit.layout.ContentPane" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" region="center" splitter="false" maxSize="Infinity">
</div>
</div>
</body>
js:
require([
"dijit/dijit",
"dojo/parser",
"maqetta/space",
"maqetta/AppStates",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/TextBox"
]);
css:
html,body {
height: 100%;
width: 100%;
}
.logo_a{
background:url("icon1.png");
}
.logo{
width:60px;
height:50px;
display:inline-block;
}
.logo_a:active{
background-position:0 1px;
}
#top_bar{
padding:0px;
background: -webkit-linear-gradient(#464646, #121212);
background: -moz-linear-gradient(#464646, #121212);
background: -ms-linear-gradient(#464646, #121212);
background: -o-linear-gradient(#464646, #121212);
background: linear-gradient(#464646, #121212);
color: #ccc;
text-shadow:none;
height:50px;
width:100%;
}
#top_bar_divider{
background-color:#1ba0e1;
height:4px;
width:100%;
}
You just need to add vertical-align: middle to your input div and to .logo_a:
.logo_a {
background:url("icon1.png");
vertical-align: middle;
}
http://jsfiddle.net/57M68/1/
The HTML goes like this
<body class="claro" data-maq-flow-layout="true" data-maq-comptype="desktop" data-maq- ws="collapse" style="margin-top:0" data-maq-appstates="{}" id="myapp">
<div id="top_bar">
<div style="width: 900px; height:50px; margin-left: auto; margin-right: auto;">
<a href="/" class="logo logo_a">
<div class="logo">
</div>
</a>
<div id="text"> <input type="text"></div>
</div>
</div>
<div id="top_bar_divider"></div>
<div data-dojo-type="dijit.layout.BorderContainer" persist="false" gutters="true" style="min-width: 1em; min-height: 1px; z-index: 0; width: 600px; height: 687px; margin- left: auto; margin-right: auto;" design="headline">
<div data-dojo-type="dijit.layout.ContentPane" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" region="center" splitter="false" maxSize="Infinity">
</div>
</div>
</body>
And the css is added to the existing demo--
#text{display:inline;}
#text input{position:relative;
top:-43px;
left:110px;}
How to create web page using CSS and div to create 4 split screen?
HTML would look like this:
<div class="box">
Area 1
</div>
<div class="box">
Area 2
</div>
<div class="box">
Area 3
</div>
<div class="box">
Area 4
</div>
CSS would look like this:
html, body {
width: 100%;
height: 100%;
}
.box {
float: left;
width: 50%;
height: 50%;
}
Here's a Fiddle to play with: http://jsfiddle.net/UMKWU/
<div class="one" style="float: left; width: 50%; height: 50%;">
</div>
<div class="two" style="float: left; width: 50%; height: 50%;">
</div>
<div class="three" style="float: left; width: 50%; height: 50%;">
</div>
<div class="four" style="float: left; width: 50%; height: 50%;">
</div>
I'm not allowed to comment on questions, otherwise I would just add a comment on first answer by Jordan. His answer is correct, but when you add border, you need to account for the border width, in that case, just add to your css: border-width:1%; and change the width:49%;
height: 49%;.
That should do the trick, here is a link to Fiddle: http://jsfiddle.net/UMKWU/3/
Hi you can do as like this
Css
html, body {
width: 100%;
height: 100%;
}
.box1, .box2, .box3, .box4 {
float: left;
width:49%;
height: 49%;
border-style: solid;
border-width:1%;
}
.box3{
clear:left;
}
HTML
<div class="box1">
Area 1
</div>
<div class="box2">
Area 2
</div>
<div class="box3">
Area 3
</div>
<div class="box4">
Area 4
</div>
Live demo here http://jsfiddle.net/rohitazad/UMKWU/8/