I want to align a left div vertically in middle of right div. I am able to do that by using display:table-cell; but then I cannot use the float:left
Here's what I'm trying:
HTML:
<div class="wrapper">
<div class="left"><h1><img src ="img.png" /></h1></div>
<div class="right">Right</div>
</div>
CSS:
.wrapper{
overflow: hidden;
border: 1px solid blue;
width: 400px;
}
.left{
border: 1px solid red;
max-width: 200px;
max-height: 50px;
float: left;
overflow: hidden;
display:table-cell;
vertical-align:middle;
}
img{
display: block;
}
.right{
width: 200px;
height: 200px;
float: right;
border: 1px solid green;
}
Demo:
http://jsfiddle.net/fmpLt/
Though I am not clear about what you are expecting, I have tried the below code. check if it can help you
Add display:table to .wrapper then table-cell to .left
DEMO
Another solution with position:absolute
.wrapper{
overflow: hidden;
border: 1px solid blue;
width: 400px;
position:relative; background:yellow
}
.left{
border: 1px solid red;
max-width: 200px;
max-height: 50px;
overflow: hidden;
position:absolute;
top:50%; margin-top:-25px
}
DEMO 2
If you know the left div height (eg.50px), you could set a position:relative to the wrapper container and the left div, then set a top position of 50% to the left div, with a margin-top equal to minus 50% of height.
Eg.
.wrapper{
...
position:relative;
}
.left{
...
position:relative;
height:50px;
top:50%;
margin-top:-25px;
}
You could use margin-top set to half the height of .right less half the height of the image. In this case, that would be margin-top: 68px.
Related
I'm trying to make my orange div to get all of the white space in height. Im using 1920x1080 monitor. When i open bottom code in my page i have white space under red, blue and green div's. I wanna orange div to move my red, blue, green div's down and fill that white space under them.
The idea is site automatically to fill browser window without scrollbars.
I try to write 100% instead of 700px, but when my attribute is 100%, orange div disappear.
Can someone tell me why that is happening, where is my mistake, how can i prevent it.
Also is it there another way to give equal space to my red, blue and green div's? I calculate that 100% of page divided by 3 is 33.3333 in period. That's why i set my width to be 33.33% but it didn't fill page completely.
.wrapper{
position: relative;
}
.pink{
background-color: pink;
height: 100px; width: 100%;
position: relative;
}
.orange{
background-color: orange;
height: 700px; width: 100%;
position: relative;
margin: 0px 0px 0px 0px;
}
.red{
background-color: red;
height: 300px; width: 33.33%;
position: relative;
float: left;
}
.blue{
background-color: blue;
height: 300px; width: 33.33%;
position: relative;
float: left;
}
.green{
background-color: green;
height: 300px; width: 33.33%;
position: relative;
float: left;
}
<div class="wrapper">
<div class="pink"></div>
<div class="orange"></div>
<div class="red"></div><div class="blue"></div><div class="green"></div>
</div>
Give height:100% to parent div, body and html
body, html{
height:100%;
}
.wrapper{
position: relative;
height:100%;
}
.orange{
background-color: orange;
height: 100%; width: 100%;
position: relative;
margin: 0px 0px 0px 0px;
}
Please check this fiddle.
Is this what you mean?
I've made use of
display: table
display: table-row
display: table-cell
The orange div will now fill the remaining height of the window.
Fiddle
EDIT: I updated the fiddle. tidied the code a bit.
Include this in your style:
body{
margin:0;
padding:0;
}
Wrap orange and pink inside a separate div from last three and use display:flex; on that div.
You can make three div eualwidth by using display:flex to the parent div and flex:1 to the children divs. You don't necessarily have to use width:33.33%;
html,body{
width:100%;
height:100%;
margin:0;
padding:0;
}
.wrapper{
position: relative;
margin:0;
padding:0;
display:flex;
min-height:100vh;
flex-direction:column;
}
.pink{
background-color: pink;
height: 50px;
width: 100%;
position: relative;
flex-shrink:0;
}
.orange{
background-color: orange;
height:100%;
width: 100%;
position: relative;
margin: 0px 0px 0px 0px;
flex-shrink:0;
flex-grow:1;
}
.wrapper2{
position: relative;
margin:0;
padding:0;
flex-shrink:0;
width:100%;
height:100px;
display:flex;
flex-direction:row;
justify-content: space-between;
}
.red{
background-color: red;
height:100%;
position: relative;
float: left;
flex: 1;
}
.blue{
background-color: blue;
height:100%;
flex: 1; position: relative;
float: left;
}
.green{
background-color: green;
height:100%;
flex: 1; position: relative;
float: left;
}
<div class="wrapper">
<div class="pink"></div>
<div class="orange"></div>
<div class="wrapper2">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</div>
</div>
Suppose there is a div, say "parent-div".
The parent div has a background color. What if the child div, "child-div", needs to be set with a transparent background,such that it is set with the background image of the grandparent div, with class name "wrapper"?
I know that a child div can inherit css properties from parent div, but how do I set the background to transparent, making the whole picture appear like the parent-div has a hole in it?
.wrapper{
background-image: url('http://media.istockphoto.com/photos/medium-golden-brown-wood-texture-background-picture-id513694258?k=6&m=513694258&s=170667a&w=0&h=xETakP7VjpAtRj9e6rJRYNqw_AJLZ9ovLlC4ebR5BOQ=');
}
.parent-div{
width: 100px;
height: 100px;
background: #ff0000;
padding: 10px;
margin: auto;
}
.child-div{
width: 60%;
height: 60%;
margin: auto;
background: transparent;
border: 1px solid;
}
<div class="wrapper">
<div class="parent-div">
<div class="child-div">
</div>
</div>
</div>
Don't apply background on .parent-div.
Instead use a large value of box-shadow on .child-div and add overflow: hidden on .parent-div to hide unwanted shadow effect.
Following css will do the work:
.parent-div {
overflow: hidden;
}
.child-div {
box-shadow: 0 0 0 500px #f00;
}
.wrapper {
background-image: url('http://media.istockphoto.com/photos/medium-golden-brown-wood-texture-background-picture-id513694258?k=6&m=513694258&s=170667a&w=0&h=xETakP7VjpAtRj9e6rJRYNqw_AJLZ9ovLlC4ebR5BOQ=');
}
.parent-div {
overflow: hidden;
width: 100px;
height: 100px;
padding: 10px;
margin: auto;
}
.child-div {
box-shadow: 0 0 0 500px #f00;
border: 1px solid;
width: 60%;
height: 60%;
margin: auto;
}
<div class="wrapper">
<div class="parent-div">
<div class="child-div">
</div>
</div>
</div>
Check this Fiddle
based on:
.parent{
width:300px;
height:300px;
position:relative;
border:1px solid red;
}
.parent:after{
content:'';
background:url('http://www.dummyimage.com/300x300/000/fff&text=parent+image');
width:300px;
height:300px;
position:absolute;
top:0;
left:0;
opacity:0.5;
}
.child{
background:yellow;
position:relative;
z-index:1;
}
ref
I'm really stuck on this and would appreciate any direction.
I need to code the following design using CMS and html but I have no idea how to get the center image to overlap the divs on the right and left of the image. I have been reading about relative position and z-indexes but everything that I have tried has failed. Generally when I line up three dives across I will use the float property and it works perfectly but it turns out z-indexes can only be used with positioned elements. If someone could get me started in the right direction I will probably be able to figure it out.
See the design I am trying to code here: https://cdn.shopify.com/s/files/1/0211/8026/files/Example.png?9982
This is the base framework but I don't know where to go from here...
.row-container {
width: 100%;
height: 300px;
margin: auto;
text-align: center;
position: relative;
}
.box1 {
height: 216px;
width: 288px;
float: left ; /* <-- This does not work */
border: 1px solid blue;
}
.image {
height: 250px;
width: 350px;
float: left ; /* <-- This does not work */
border: 1px solid grey;
}
.box2 {
height: 216px;
width: 288px;
float: left; /* <-- This does not work */
border: 1px solid red;
}
<div class="row-container">
<div class="box1"></div>
<div class="image">-- Should I use a div for the image?</div>
<div class="box2"></div>
</div>
Try this it would have worked a bit more better if position:absolute is used but since you wanted float there will be re sizing problems Fiddle
Zoom out to get the effect
.row-container {
width: 100%;
height: 300px;
margin: auto;
text-align: center;
position: relative;
}
.box1 {
position: relative;
z-index: -1;
background: green;
height: 216px;
width: 288px;
float: left;
}
.image {
margin-left: -80px;
background: red;
float: left;
height: 250px;
width: 200px;
}
.image img {
width: 300px;
}
.box2 {
position: relative;
z-index: -1;
float: left;
background: blue;
height: 216px;
width: 288px;
}
<div class="row-container">
<div class="box1"></div>
<div class="image">
<img src="http://placekitten.com/300/301" />
</div>
<div class="box2"></div>
</div>
You can do it without floats using position: (colors added for emphasis)
fiddle
.row-container {
width:900px;
height:300px;
margin:auto;
text-align: center;
border:2px solid black;
background-color:blue;
position:relative;
}
.box1 {
height:216px;
width: 288px;
left:0px;
position:absolute;
z-index:10;
}
.image {
height:250px;
width: 350px;
position:absolute;
top:20px;
left:275px;
z-index:100;
background-color:red;
}
.box2 {
height:216px;
width: 288px;
right:0px;
position:absolute;
z-index:10;
}
div{
background-color:green;
}
You can use z-index on position: relative, so add that to your inner elements and set the z-index.
To create the overlap you can use a negative margin-left on the second and third elements.
I'm trying to set these divs to align like this:
but they end up either overlapping eachother (.title takes full width of container) or underneath eachother. Ideas?
.wrapper{
display: table;
float: left;
width: 1000px;
height: 200px;
}
.pic{
float: left;
width: 100%;
height: 20%;
}
.title{
width: 100%;
height: 20%;
}
.content{
width: 100%;
height: 20%;
}
.footer{
width: 100%;
height: 20%;
}
HTML:
<div class="wrapper">
<div class="pic"><img src="..."></div>
<div class="title"><p>title</p></div>
<div class="content"><p>lorem ipsum</p></div>
<div class="footer"></div>
</div>
JS FIDDLE: http://jsfiddle.net/mmb84836/
As per the Best Practice:
Put Pic in one Box and the other three Boxes on right in one Box and use "float:left or **display:inline-block**for those.
Here is the code for the same:
HTML
<div class="wrapper">
<div class="leftBox">
<div class="pic">pic</div>
</div>
<div class="rightBox">
<div class="title">title</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
</div>
CSS
div {
border:1px solid #000;
}
.wrapper {
display: block; /*Default Property - You Can Remove Also*/
width: 1000px;
height: 200px;
}
.leftBox {
float:left;
width :20%;
height:100%
}
.rightBox {
width :79.5%;
float:left;
height:100%
}
.pic {
width: 100%;
height: 100%;
}
.title {
width: 100%;
height: 20%;
}
.content {
width: 100%;
height: 20%;
}
.footer {
width: 100%;
height: 20%;
}
Here is the Working Fiddle: http://jsfiddle.net/7xLyc3q1/
You've got a lot of answers here, but none of them explain what is actually happening here. When using float, there's something important you need to understand: floated elements are lifted out of the box model and have effectively zero width and height as far as other elements are concerned. There is a workaround for this: by specifying overflow:hidden in the parent element, floated elements will no longer "collapse".
Here's an example that demonstrates this. Notice that the title, content, and footer have a width:100%, and they're only filling the space that is remaining for them -- this is probably what you'd expect to happen. Notice also that there was no need to float them to the right... they take the space that's left.
Try adding float: right to .title, .content, and .footer.
Also it may be worth considering using Foundation or Twitter Bootstrap. Both have grid systems so this would guarantee the divs would resize to fit any size screen.
<div class="wrap">
<div class="pic">pic</div>
<div class="other">oth1</div>
<div class="other">oth2</div>
<div class="other">oth3</div>
</div>
.wrap { width:100; height:200px; }
.pic { float:left; width:29%; height:100%; margin-right:1%; background-color:red; }
.other { float:left; width:70%; height:32%; margin-bottom:0.5%; background-color:green; }
and jsfiddle http://jsfiddle.net/t85kz39a/
Here is one way of doing it if you can specify a width for the image. I assumed that the image would be 200px wide in this demo.
Try the following CSS:
.wrapper{
width: 600px;
height: 200px;
padding-left: 200px;
border: 1px dashed gray;
}
.pic{
float: left;
width: 190px;
margin-left: -200px;
border: 1px dashed blue;
}
.pic img {
display: block;
}
.title{
width: auto;
height: 20%;
border: 1px dotted blue;
}
.content{
width: auto;
height: 20%;
border: 1px dotted blue;
}
.footer{
width: auto;
height: 20%;
border: 1px dotted blue;
}
The trick is to open up a space to place the image. Add a 200px wide left padding to
the .wrapper.
The padding will force .title, .content and .footer to align 200px from the edge
of the wrapper.
For .pic, set the width to 200px (or smaller) and set the left margin to -200px to move
it into the padding area.
Finally, set the correct width for .wrapper, 600px. The overall width of .wrapper
will compute to 800px (600px width + 200px left padding - -200px left margin from the
float).
See demo: http://jsfiddle.net/audetwebdesign/mgg1stmc/
The main benefit of this approach is that you don't need to add any other wrapping
elements. (If you use floats, the extra wrappers are necessary.)
There's a much simpler css-only way without changing your HTML structure:
Demo http://jsfiddle.net/bfhng3a9/
All you need:
.wrapper {
overflow:auto;
text-align:center;
}
.pic {
float: left;
width:20%;
}
.title, .content, .footer {
width:80%;
float:right;
clear: right;
}
You can use this code and it is working according to your design.
Live Working Demo
HTML Code:
<div class="wrapper">
<div class="pic"><img src="..."/></div>
<div class="title"><p>Title</p></div>
<div class="content"><p>Content</p></div>
<div class="footer"><p>Footer</p></div>
</div>
CSS Code:
.wrapper{
position: relative;
float: left;
width: 1000px;
height: 200px;
border: 1px solid #000000;
}
.pic{
float: left;
width: 300px;
height: 200px;
background-color: red;
position: relative;
}
.title{
width: 650px;
height: 60px;
background-color: green;
position: relative;
left: 350px;
top:-16px;
}
.content{
width: 650px;
height: 60px;
background-color: blue;
position: relative;
left: 350px;
top: -22px;
}
.footer{
width: 650px;
height: 60px;
background-color: gold;
position: relative;
left: 350px;
top: -28px;
}
Result:
I'm having an issue using display: table and display: table-cell.
Fiddley: http://jsfiddle.net/5q51sbqb/1/
I have a div with a display:table; and within that two divs with display:table-cell;
The left div (.t1) is a fixed width and the right div(.t2) should take up the rest of the space to the edge of the container.
My issues lies with adding a long div (2000px) to the right div(.t2). I basically need the content-window to stay the same width as its parent without pushing out further than the confines of the container, as to allow the content within to be scrolled.
Keep in mind this needs to be without using a fixed width, as the container and t2 are both responsive. And I also have to use table and table-cell display properties :(
So basically the children of the .t2 div are flowing beyond the container when I need them to fit within the container width ( without setting a fixed width on the content-window ... and on the .t2 div)
I'm stumped.
HTML
</div>
</div>
<div class="table-cell t2">
<div id="content-window">
<div id="content"></div>
</div>
</div>
</div>
</div>
CSS
#container{
width: 600px;
height: 600px;
margin: 0px auto;
background-color:green;
padding: 2px;
}
#table{
display:table;
width:100%;
}
.table-cell{
display:table-cell;
height: 300px;
padding:2px;
}
.t1{
width: 100px;
background-color: red;
}
.t2{
width:auto;
background-color: blue;
}
#content-window{
width:100%;
overflow:scroll;
}
#content{
width: 2000px;
height: 50px;
background-color:yellow;
}
Since you smartly created a #content-window, set it to be a position: absolute; so it won't mess up the cell's auto width. Just remember to set the .t2 to be a position: relative, so the #content-window might fill it in width and height, using the contained space of the right table cell.
tip: Use overflow-x if you want it to scroll only horizontally.
#container{
width: 600px;
height: 600px;
margin: 0px auto;
background-color:green;
padding: 2px;
}
#table {
display:table;
width:100%;
}
.table-cell{
display:table-cell;
height: 300px;
padding:2px;
}
.t1 {
width: 100px;
background-color: red;
}
.t2 {
position: relative;
background-color: blue;
}
#content-window{
position: absolute;
width:100%;
height: 100%;
overflow: hidden;
overflow-x: scroll;
height:50px;
}
#content{
width: 2000px;
height: 50px;
background-color:yellow;
}
Check it here: http://jsfiddle.net/5q51sbqb/4/