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.
Related
I am trying setup a design where I would like a left bar for navigation and things that remains fixed and doesn't scroll, but have a content box next to it that does scroll as needed. The problem I'm running into, if I position: fixed; the first DIV it technically does what I want, but it overlaps the second DIV. I'm just creating this and using JsFiddle to test easily, so I don't have an actual working code other than this fiddle. I'll admit, I've been awake for about 30 hours now, so if this is a really silly oversight from me, please forgive me. Thanks!
FIDDLE
I tried to write this code and it is responsive too.
* {
padding: 0px;
margin: 0px;
}
#one {
float: left;
position: fixed;
width: 25%;
background: #666;
height: 100%;
}
#two {
box-sizing: border-box;
padding: 20px;
position: absolute;
left: 25%;
right: 0%;
float: right;
width: 75%;
background: #333;
}
I hope this helps.
When you add position:fixed the element is taken out of the flow and its basically functions in respect to the window .
so the following CSS :
#one {
float: left;
position: fixed;
width: 25%;
background: #666;
height: 100%;
}
25% is 25% of the window not 25% of <div id="wrap">(and hence the overlap) , if you take off the position:fixed you'll see no overlap .
with position fixed , you probably want to have some left offset on <div id="two">, you cal experiment with :
margin-left: // DO YOUR MATH.
padding-left: // DO YOUR MATH.
You already have height: 400px; on your over div so specify the height to #one too http://jsfiddle.net/ypL8ypsf/5/
#one {
position:fixed;
width:16%;
background: #666;
height:384px;
}
Hope this will help
This changes in css will solve your problem
#wrap {
background: #999;
width: 500px;
height: 400px;
border: 1px solid black;
padding: 5px;
overflow: scroll;
}
#one {
position: fixed;
width: 25%;
background: #666;
height: 100%;
display:inline-block;
}
#two {
width: 70%;
background: #333;
height: 100%;
display:inline-block;
overflow:hidden;
margin-left:29%;
}
.clear {
clear: both;
}
If you have position :fixed on an element. it can only controlled by the browser window, cannot control by parent div. so if you add width: 25% it fill up 25% of your browser window. not in parent div.
i have 2 solutions,
use javascript. dynamically add width in 'px' and add position:
fixed after
use position: absolute. instead of fixed. ( actually your height is 100% so it doesn't matter your position fixed. )
1nd solution: javascript approach [sample code]:
//remove position:fixed from #one
#one {
float: left;
width: 25%;
background: #666;
height: 100%;
}
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
var calWidth = $("#one").width(); //get the width
$("#one").css({width:calWidth+'px',position:'fixed'}); //apply to the div
</script>
2nd solution: CSS approach [sample code]
#wrap{
position:relative;
}
#one{
position:absolute;
}
Try overriding your current float and position styles with:
float: left; and
position: relative;
Instead of fixing that DIV, I've float them both to the left and give the second DIV overflow-y scroll property.
Hope this can help you:
#wrap {
background: #999;
width: 500px;
height: 400px;
border: 1px solid black;
padding: 5px;
}
#one {
float: left;
width: 25%;
background: #666;
height: 100%;
overflow:hidden;
}
#two {
float: left;
width: 75%;
background: #333;
height: 100%;
overflow-y: scroll;
}
.clear {
clear: both;
}
If it is not usefull you always can try some framework with default sidebars.
Although you could add some margin to the second div to displace it to the right, I don't think you should use fixed for this.
You should do this:
<div class="div1">This is not moving</div>
<div class="div2"> Loren ipsum...</div>
html, body{
height: 100%;
padding: 0;
margin: 0;
}
.div1{
background: #DDD;
width:40%;
height: 100%;
float: left;
overflow: hidden;
}
.div2{
background: #EEE;
width:60%;
height: 100%;
float: left;
overflow-y:auto;
}
Here is a pen for you: http://codepen.io/vandervals/pen/bdBWJV
I managed to do what you want but by adding more div.
the HTML would be
<div id="wrap">
<div id="testone"><div id="one"></div></div>
<div id="test"><div id="two">Lorem ipsum...
</div></div>
<div class="clear"></div>
and the css then
#wrap {
background: #999;
width: 500px;
height: 400px;
border: 1px solid black;
padding: 5px;
overflow: scroll;
}
#testone{
float: left;
width: 25%;
background: #666;
height: 100%;
}
#one {
position: fixed;
}
#test{
float: right;
width: 75%;
height: 100%;
}
#two {
background: #333;
}
.clear {
clear: both;
}
hello I have a problem with vertical-align: middle;
.wp{
width: 100px;
height: 500px;
background-color: #000000;
}
.sub{
width: 100%;
height: 20%;
background-color: red;
vertical-align: middle;
}
<div class="wp">
<div class="sub"></div>
</div>
I want to div witch has .sub class will be vertical center of .wp div. plz help me.
Sorry for my bad english.
As an alternative, you can use transform's translateY method, like
transform: translateY(-50%);
Works here: http://jsfiddle.net/r5z8gjgu/embedded/result/
vertivcal-align works with table-cell. look how it works in jsfiddle.
this is the html and css
<div class="table">
<div class="tableRow">
<div class="wp">
<div class="sub"></div>
</div>
</div>
</div>
.table {
display: table;
width: 100px;
}
.tableRow{
display: table-row;
height: 400px;
}
.wp {
display: table-cell;
background-color: tomato;
vertical-align: middle;
}
.sub {
height: 200px;
background-color: green;
}
also you can achieve this by "relative" and "absolute" positions
.wp{
position: relative;
width: 100px;
height: 500px;
background-color: #000000;
}
.sub{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 20%;
background-color: red;
vertical-align: middle;
}
After looking at your questions I was curious and a quick google search gave me the following already from stackoverflow:
Vertically Aligning Divs
http://phrogz.net/css/vertical-align/index.html
http://jsfiddle.net/ktxpP/3/
In an attempt to not just provide a link answer:
The snippet below belongs to Lalit :
You can vertically align a div in other div. For this you must define css like this example on fiddle. Just see the small demo that vertically align a innerDiv in outerDiv.
HTML
My Vertical Div CSS
.outerDiv {
display: inline-flex; <== This is responsible for vertical alignment
height: 400px;
background-color: red;
color: white; }
.innerDiv {
margin: auto 5px; <== This is responsible for vertical alignment
background-color: green; } .innerDiv class margin must be as margin: auto *px;
[* can be your desired value.]
display: inline-flex property is supported in latest(updated/current
versions) browsers with HTML5 support.
Always try to define height of vertically align div (i.e. innerDiv)
for any further compatibility issue.
.wp{
width: 100px;
height: 500px;
background-color: #000000;
display:inline-flex; <--
}
.sub{
width: 100%;
height: 20%;
background-color: red;
margin:auto; <--
}
<div class="wp">
<div class="sub"></div>
</div>
If I understand you correctly, you want something like this
.wp{
width: 100px;
height: 500px;
background-color: #000000;
}
.sub{
position:absolute;
top: 250px;
width: 100px;
height: 20%;
background-color: red;
vertical-align: middle;
}
<div class="wp">
<div class="sub"></div>
</div>
Hope that helps.
this is my solution try this
<html>
<head>
<style>
.wp{
width: 10%;
height: 10%;
float: left;
background-color: green;
border: 1px solid #00FF 00;
margin: 0.5%;
position: relative;
}
.sub
{
width: 50%;
height: 50%;
background-color: red;
position: absolute;
}
.center{
margin: 0 auto;
left: 25%;
}
.right{
left: 50%;
}
.middle {
top: 25%;
}
.bottom {
top: 50%;
}
</style>
</head>
<body>
<div class="wp">
<div class="sub center middle"></div>
</div>
</body>
</html>
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 am trying to create a page layout something like this.
This is my HMTL structure -
<div id="content-three-cols">
<div class="leftcol">
</div>
<div class="cols-content">
<div class="banner">
</div>
<div class="two-cols">
<div class="rightcol">
</div>
<div class="middlecol">
</div>
</div>
</div>
</div>
This is my CSS code so far -
.leftcol {
display: inline;
float: left;
min-height: 500px;
width: 180px;
background: #34ab2b;
}
.banner {
background: #ffe400;
border-bottom: 1px solid #DDDDDD;
float: left;
width: 750px;
height: 150px;
}
.middlecol {
width: 600px;
min-height: 600px;
background: #2b73ab;
}
.rightcol {
width: 150px;
min-height: 500px;
background: #b2540f;
float: right;
}
Adding this styles I couldn't get my expecting output. Instead my desire result this code create a mess layout for me. Can anybody tell my how can I figure this out.
This is JsFiddle
Thank you.
Quite simple really, here is a quick demo i made, i will explain everything in a second.
Demo
HTML:
<div class="left"></div>
<div class="head"></div>
<div class="center"></div>
<div class="right"></div>
CSS:
body, html{
height:100%;
}
.left, .right, .head, .center{
float:left; // Float all the containers to the left so have a `inline` effect
}
.left{
height:100%;
width:25%; // Full width minus right and center width
background:orange;
}
.head{
background:red;
height:10%; // Height of header
width:75%; // Full width minus left sidebar
}
.center{
width:50%; // Full width minus both sidebar's width
background:skyblue;
height: 90%; // Full height minus header height
}
.right{
width:25%; // Full width minus center and left width
background:green;
height:90%; // Full height minus header height
}
also note, you may need to have a Clearfix handy seeing as a lot of elements are floating in thin air.
Happy coding :)
Clearfix...
Well take a look at this fiddle, everything is working fine
http://jsfiddle.net/mqzJN/
Now if we add a float to the link like this
http://jsfiddle.net/mqzJN/1
Then you can see the background is gone, because the <div> doesn't have any height any more because the link is floating in thin air.
So you use a clearfix to fix this, like in this fiddle
http://jsfiddle.net/mqzJN/2/
So any element that has a float you might wan't to add the clearfix class to the container of that element like in the last fiddle example.
There you go! (http://jsfiddle.net/aV2Dn/)
<div id="wrapper">
<div id="left_column"></div>
<div id="top_bar"></div>
<div id="middle"></div>
<div id="right_column"></div>
</div>
#wrapper{
width:500px
height:500px;
margin: auto;
}
#left_column{
width: 100px;
height:500px;
background: #34ab2b;
position:absolute;
left:0px;
top: 0px;
}
#top_bar{
position: absolute;
left: 100px;
top: 0px;
width: 400px;
height:100px;
background-color: #ffe400;
}
#middle{
position: absolute;
left: 100px;
top: 100px;
width: 300px;
height:400px;
background: #2b73ab;
}
#right_column{
position: absolute;
left: 400px;
top: 100px;
width: 100px;
height:400px;
background: #b2540f;
}
here
The HTML:
<body>
<div class="left">
</div>
<div class="right">
<div class="upper"></div>
<div class="lower">
<div class="innerLeft"></div>
<div class="innerRight"></div>
</div>
</div>
</body>
The CSS:
body {
width: 100%;
}
.left {
width: 25%;
height: 450px;
float: left;
background-color: #f00;
}
.right {
width: 75%;
height: 450px;
float: right;
background-color: #4cff00;
}
.upper {
width: 100%;
float: left;
height: 100px;
background-color: blue;
}
.lower {
width: 100%;
height: 100px;
background-color: grey;
}
.innerLeft {
width: 65%;
float: left;
height: 350px;
background-color: fff;
}
.innerRight {
width: 35%;
float: right;
height: 350px;
background-color: #000;
}
Please see the attached image,I want to design this in html,Quite successful.But when I test it on different resolutions the red box moves here and there.I made the design in 100% width and height 100%
<style type="text/css">
#green-box { width: 75%; background: green; float: left; position: relative; height: 100%; overflow: visible; position: relative; }
#blue-box { width: 25%; background: blue; float: left; height: 100%; }
#red-box {
position: relative;
top: 50px;
left:450px;
width: 357px;
background: red;
height: 207px;
margin:0 auto;
}
#green-box-content
{
margin:0 auto;
width:1600px;
height:800px;
}
</style>
<div id="container">
<div id="green-box">
<div id="green-box-content">
<p>Here is some text!</p>
<div id="red-box"></div>
</div>
</div>
<div id="blue-box">
</div>
<div style="clear: both"></div>
</div>
Part of the problem is in how you are trying to position the element. It looks like you want it to be centered between the blue and green, but you're positioning from the left-hand side. Once the width of the green changes, it won't be where you want it. It would be better to position from the right (the border between the two) and set right to -1/2 of the width.
Also, 100% height will only work if the parent containers have a set height
Here's the modified CSS, and a fiddle to demonstrate
#blue-box,
#green-box {
height: 300px;
}
#green-box {
position: relative;
width: 75%;
float: left;
background: green;
}
#blue-box {
width: 25%;
float: left;
background: blue;
}
#red-box {
position: absolute;
top: 50px;
right: -178px; /* width / 2 */
width: 357px;
height: 207px;
background: red;
}
Remove width and height from #green-box-content, works perfectly in my local.
#green-box-content
{
margin:0 auto;
}
check this after making the change in my local.
I think you should Percentage of the red box as you have used it for green and blue and position as absolute.
http://jsfiddle.net/ccEKk/
if I am wrong update the fiddle so that someone can help you with it
#red-box {
position: absolute;
top: 5%;
left:45%;
width: 35%;
background: red;
height: 20%;
margin:0 auto;
}