I am trying to center 3 div into a parent div with no result.
Could you help me please ?
HTML :
<div id="container">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
CSS :
#container {
text-align: center;
}
#left, #middle, #right {
width: 200px;
float: left;
background: red;
height: 90px;
}
RESULT :
Change the float:left; to display:inline-block;, like this:
#left, #middle, #right {
width: 200px;
display:inline-block;
background: red;
height: 90px;
}
you can try this one:
#left, #middle, #right {
width: 200px;
display:inline-block;
background: red;
height: 90px;
}
DEMO HERE
Try display flex. You'll need to add vendor prefixes!
#container {
text-align: center;
display: flex;
justify-content: space-between;
width: 100%;
}
#left, #middle, #right {
width: 200px;
background: red;
height: 90px;
}
<div id="container">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
#container {
text-align: center;
}
#left, #middle, #right {
width: 200px;
margin:0px auto;
height: 90px;
}
#left
{
background: red;
}
#middle
{
background:blue;
}
#right
{
background: green;
}
<div id="container">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
Add Bootstrap CSS and have a look at this example.
Here:
COL=Column
MD=Medium Sized Device
4 represents the partition of the screen as the Maximum column possible in a single row is 12
So 4/12=3 Panels in result.
<div class="row">
<div class="col-md-4">left</div>
<div class="col-md-4">middle</div>
<div class="col-md-4">right</div>
</div>
Try Bootstrap it will make your life easy.
Here's link for the Grip System you want Bootstrap Grid System.
remove float & add display inline-block
#left, #middle, #right {
width: 200px;
display:inline-block;
background: red;
height: 90px;
}
Add margin-left: auto, margin-right:auto, width: 600px to your container.
Thanks
Related
I have two divs, one on top, the other on the bottom. I need to have the bottom div fixed, and to resize and occupy the space above when the div on top is collapsed. Links to the scenarios below. Is this possible to accomplish using only CSS? This is for an angularJS application.
UPDATE: Support for older versions of browsers, specifically IE, must also be considered.
Div1 expanded
Div1 collapsed
Yes, you can do this using flex. See snippet below.
$(document).ready(function() {
$("#div1").click(function() {
$(this).css("max-height", "50px")
});
});
body, html {
margin: 0;
height: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.box {
flex-grow: 1;
text-align: center;
}
#div1 {
background-color: #4472C4;
}
#div2 {
background-color: #ED7D31;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- begin snippet: js hide: false console: true babel: false -->
Update
Since you noted in the comments you wanna support older browsers, the same as above can be achieved using the old fasion table layout.
$(document).ready(function() {
$("#div1").click(function() {
$(this).css("height", "50px")
});
});
html, body {
height: 100%;
margin: 0;
}
.container {
display: table;
height: 100%;
width: 100%;
}
.row {
display: table-row;
width: 100%;
}
.box {
display: table-cell;
color: #fff;
vertical-align: middle;
text-align: center;
}
#div1 {
background-color: #4472C4;
}
#div2 {
background-color: #ED7D31;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="box" id="div1">
<strong>div1</strong>
</div>
</div>
<div class="row">
<div class="box" id="div2">
<strong>div1</strong>
</div>
</div>
</div>
You can try this.
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: table;
height: 100%;
width: 100%;
background: yellow;
}
.content {
display: table-row;
/* height is dynamic, and will expand... */
height: 100%;
/* ...as content is added (won't scroll) */
background: yellow;
}
.footer {
display: table-row;
background: grey;
}
<div class="wrapper">
<div class="content">
<h2>Content</h2>
</div>
<div class="footer">
<h3>Sticky footer</h3>
<p>Footer of variable height</p>
</div>
</div>
you can try this it works fine for me
<div class="wrapper">
<div class="container">
<div class="top-div">
topd div
</div>
<div class="bottom-div">
bottom div
</div>
</div>
</div>
CSS
.wrapper{
float:left;
height:100%;
}
.container {
position:absolute;
display: block;
float: left;
width: 100%;
height: 100%;
min-height:100%;
}
.top-div {
margin: 5px;
float: left;
position: fixed;
top: 0;
width: 90%;
height: 30%;
background-color: red;
}
.bottom-div {
margin: 5px;
position: absolute;
float: left;
bottom: 0;
width: 90%;
background-color: green;
}
use jQuery
$(function() {
var containerH = $(".container").height();
var topdivH = $(".top-div").height();
$(".bottom-div").height(containerH - topdivH);
});
check out jsfiddle
code jsFiddle
I applied jquery's click function to 'li#info' element. But when I click, it perform jquery to element of different parent also ('#theme div#info-overlay').
I want, whenever 'li#info' is clicked on the parent element('#theme') then it perform function to its child element only(div#info-overlay).
Like in the code, by clicking on 'Fe' it open overlay on both the block. But i want it to show overlay only to the block for which 'Fe'is clicked.
sorry, I am new in jquery.
I got your point. you just need to change one line of code
because both divs have same ids thats why both are appearing on click
and it's not a good practice to use same id multiple time on a single file.
it will make issue somewhere sometime.
i have change this line
$("div#info-overlay").toggle('100');
into this
$(this).parents('#theme').find("#info-overlay").toggle('100');
check this
JS Fiddle
use this to find div $(this).parents('#theme').find("#info overlay").toggle('100');
$(document).ready(function(){
$("div#theme").hover(function(){
$(".theme .header *").show();
$(".theme .header .overlay").hide();
},function(){
$(".theme .header *").hide();
});
$("li#info").click(function(){
$(".theme .header .overlay").hide();
$(this).parents('#theme').find("#info-overlay").toggle('100');
// $("div#info-overlay").toggle('100');
});
});
/*
theme block
*/
.theme{
width: 100%;
height: 250px;
background-color: #fff;
margin: 20px auto;
}
.theme .header{
width: 100%;
height: 200px;
position: relative;
background-color: #eee;
}
.theme .header *{
display: none;
}
.theme .header .overlay{
position: absolute;
background-color: #fff;
left: 60px;
top: 10px;
width: 83%;
height: 180px;
z-index: 80;
}
.theme .header .about{
position: absolute;
left: 10px;
top: 10px;
}
.theme .header .about li{
display: block;
height: 40px;
width: 40px;
border-radius: 50%;
background-color: #FED200;
opacity: .5;
color: #fff;
padding: 5px 10px;
margin: 5px 0;
}
.theme .footer{
width: 100%;
height: 50px;
padding: 0 20px;
}
.theme .footer .left{
width: 85%;
display: inline-block;
overflow-y:hidden;
height: 50px;
float: left;
padding: 10px 0;
}
#media screen and (min-width:620px) {
.theme{
width: 70%;
}
}
#media screen and (min-width:720px) {
.theme{
width: 49%;
display: inline-block;
}
}
#media screen and (min-width:920px) {
body .container.theme-holder {
width: 70%;
}
}
#media screen and (min-width:1024px) {
body .container.theme-holder {
width: 95%;
}
.theme{
width: 32%;
}
}
#media screen and (min-width:1200px) {
body .container.theme-holder {
width: 85%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="theme" class="theme">
<div class="header">
<div class="about">
<li id="info">Fe</li>
</div>
<div id="info-overlay" class="overlay">
info
</div>
</div>
<div class="footer">
<div class="left">
<div class="name">
<p>Corporate sdfsfdsfdsfsd</p>
</div>
</div>
</div>
</div>
<div id="theme" class="theme">
<div class="header">
<div class="about">
<li id="info">Fe</li>
</div>
<div id="info-overlay" class="overlay">
info
</div>
</div>
<div class="footer">
<div class="left">
<div class="name">
<p>Corporate dfsasdfdsafs</p>
</div>
</div>
</div>
</div>
Let's say I have four images inside a div. they all have a width of 5.5%
[_o__o__o__o_]
I want to use javascript to change the target that is moused over (hovered on), and have it look like this:
[_o__O__o__o_]
so I made the width of the target increase
however it also pushes the other elements to the side instead of staying where they are so it's more like:
[_o___O___o__o_]
I don't know how to make the other elements stay exactly where they are instead of being pushed.
The issue is that YES I am successfully able to alter the width.
BUT changing the width of one element pushes the surrounding elements to the respective right and left.
jsbin: https://jsbin.com/zujutamazo/edit?html,css,js,output
You can use flexbox for this one:
.wrapper {
display: flex;
display: -webkit-flex;
display: -moz-flex;
width: 400px;
background-color: red;
}
.item {
position: relative;
width: 25%;
height: 200px;
}
.circle {
position: absolute;
bottom: 20px;
left: 50%;
-webkit-transform: translate(-50%, -50%);
background: white;
width: 20px;
height: 20px;
border-radius: 50%;
transition: all .3s;
}
.item1 { background-color: blue; }
.item2 { background-color: red; }
.item3 { background-color: orange; }
.item4 { background-color: yellow; }
.item:hover .circle{
background-color: black;
height: 40px;
width: 40px;
}
<div class="wrapper">
<div class="item item1">
<div class="circle"></div>
</div>
<div class="item item2">
<div class="circle"></div>
</div>
<div class="item item3">
<div class="circle"></div>
</div>
<div class="item item4">
<div class="circle"></div>
</div>
</div>
As I was explaining, you need to set a higher z-index to "be above" the non-hovered boxes. And set negative left-right margins, equivalent to the additional width from hovering to prevent everything from moving around.
Below is a working example, with percentages.
body {
width: 300px;
height: 100px;
}
.myClass {
width: 20%;
height: 50%;
position: relative;
z-index: 1;
float: left;
}
.myClass:hover {
width: 30%;
height: 70%;
z-index: 10;
margin: 0 -5%;
}
body .myClass:nth-child(1) {
background-color: red;
}
body .myClass:nth-child(2) {
background-color: green;
}
body .myClass:nth-child(3) {
background-color: blue;
}
body .myClass:nth-child(4) {
background-color: yellow;
}
<html>
<head>
</head>
<body>
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
</body>
</html>
Goal: I am trying to move divs ( blue + green ) above banner ( red ).
Purple div have different amount of content, so its height is variable.
Consider header (yellow) and banner ( red ) with fixed height so you can use fixed position.
My try is in jsfiddle.
JsFiddle: http://jsfiddle.net/dEb3m/
This is final output.
Banner is in background. News (green) is relative to main ( orange )
HTML:
<div id="header">header</div>
<div id="banner">banner</div>
<div id="search">search</div>
<div id="news">
<div class="new_item">new 1</div>
<div class="new_item">new 2</div>
<div class="new_item">new 3</div>
</div>
<div style="clear: both;"></div>
<div id="main">main</div>
<div id="footer">footer</div>
CSS:
#header, #banner, #main, #footer {
width: 400px;
}
#banner {
height: 100px;
}
#search {
width: 100px;
float: left;
}
#news {
display: inline-block;
width: 300px;
}
.new_item {
display: inline-block;
float: left;
min-height: 100px;
width: 150px;
max-width: 150px;
}
When do you to move the divs ( blue + green ) above banner ( red )?
If it is always, you can use the following CSS code:
#banner {
margin-bottom: -50px;
}
Here is a jsFiddle to play with.
If it is just when you scroll, you can use the following CSS code:
#banner {
position: fixed;
z-index: -1;
}
#search,
#news {
margin-top: 100px;
}
Here is a jsFiddle to play with.
Cheers,
Thomas.
Solution:
JSFiddle demo
CSS:
#header, #banner, #main, #footer {width: 400px;}
#header {background-color: yellow;}
#banner {background-color: red;height: 50px;position:absolute;z-index:-1;}
#search {background-color: blue;width: 100px;float: left;margin-top:20px;}
#news {background-color: green;display: inline-block;width: 300px;overflow:hidden;white-space:nowrap;margin-top:20px;}
.new_item {
vertical-align:top;
white-space: normal;
background-color: pink;
display: inline-block;
min-height: 100px;
width: 150px;
max-width: 150px;
}
#main {background-color: orange;}
#footer {background-color: silver;}
i already goggle but still don't know what to do
i have 3 div
<body>
<div id="container">
<div id="center"> <h1>center</h1> </div>
<div id="right"> <h1>right</h1> </div>
</div>
</body>
what i try to accomplish
div id=center is auto fill the width
div id=right is in right position of the div id=center, width=200px;
what i try so far
#center{
background-color: green;
float: left;
overflow: auto;
}
#right{
background-color: red;
float: right;
width: 200px;
}
How to make div id=center fill the entire width with another div (div id=right) in right position of it
jsfiddle
forgive my english
If you need a pure CSS Solution, than consider altering your DOM
Demo
First of all, remove float: left; property from #center, and than I've added width: auto; and overflow: hidden; properties which will make the columns independent.
Reference Code :
<div id="container">
<div id="right"></div>
<div id="center"></div>
</div>
#container {
height: auto;
overflow: hidden;
}
#center {
background-color: green;
width: auto;
height: 20px;
overflow: hidden;
}
#right {
background-color: red;
float: right;
height: 20px;
width: 200px;
}
Doesn't work that way - you need to nest the 'right' div inside of the 'center' div:
<body>
<div id="container">
<div id="center">
<h1>center</h1>
<div id="right">
<h1>right</h1>
</div>
</div>
</div>
</body>
Then make the h1 display inline:
h1 {
display: inline-block;
}
#center {
background-color: green;
float: left;
width: 100%;
}
#right {
background-color: red;
float: right;
width: 200px;
}
Here's an updated fiddle.
I got this from here and learnt a new/useful one.
The following solution will not affect your dom in making changes.
#center{
background-color: green;
float: left;
width: -moz-calc(100% - 200px);
width: -webkit-calc(100% - 200px);
width: calc(100% - 200px);
}
DEMO
Adding this separate since the other one may be useful to someone in the future. Here's the only CSS only solution I could come up with, but there's a caveat: you have to use percentage based widths on both divs:
#center {
background-color: green;
display: inline-block;
float: left;
width: 80%;
}
#right {
background-color: red;
float: left;
width: 20%;
}
20% should be close to what you need on the smaller div, and you can use media queries if necessary to keep it from being too wide on larger screens.
Here's an updated fiddle.
What can i do is customize your css :
#center{
background-color: green;
position : absolute;
width : 100%;
z-index : -1;
}
#center fill all the empty space between it and #right. but you have to notice it that the #center is behind the #right