Hey i'm a little unsure about this structure.
Essentially I want to a have 4 divs.
<div class="container">
<div class="top-border"></div>
<div class="box"></div>
<div class="bottom-border"></div>
</div>
The container holds the three smaller divs. My goal is to have the box div hold the content, and the border divs create a bracket around the box. Border-top will be floated to the left, and border-bottom will be floated to the right. The only issue is that the container overlaps the bottom bracket, but not the top. I don't want it to overlap either... Is there a way to fix this?
Here is a JsFiddle: http://jsfiddle.net/6ghzN/
On the bottom-border div, change
margin-top: -40px;
to
margin-bottom: -8px;
I would go a different way,
Just add .box:before and .box:after
This way, you don't have all those extra divs to be marked up!
.container{
background:#dedede;
width:80%;
height:auto;
float:left;
}
.box{
height:800px;
width:100%;
color:#cecece;
float:left;
position:relative;
}
.box:before{
content: "";
width: 40px;
height: 40px;
border-left: 8px solid gray;
border-top: 8px solid gray;
position: absolute;
left: -8px;
top: -8px;
}
.box:after{
content: "";
width: 40px;
height: 40px;
border-right: 8px solid gray;
border-bottom: 8px solid gray;
position: absolute;
right: -8px;
bottom: -8px;
}
http://jsfiddle.net/6ghzN/11/
I had success using this method:
1) Remove background color from .container and add it to .box.
.box{
...
background:#dedede;
}
2) Add a negative margin to the right of .top-border so that .box floats correctly:
.top-border{
...
margin-right:-40px;
}
http://jsfiddle.net/6ghzN/2/
Add margin-bottom: -10px; to bottom-border class.
jsfiddle
Related
This question already has answers here:
Vertically center two divs inside a wrapper (with dynamic content and content below the wrapper)
(4 answers)
Closed 7 years ago.
I have multiple boxes (items) with an item number and a description. I want to vertical align my item number regardless of the description height (using only HTML and CSS).
See this image for more info:
<div class="item">
<div class="item-number">1</div>
<div class="item-description">Text placeholder</div>
</div>
As you can see I have multiple boxes and the description text can have different lengths, so I can't absolute position my item number relative to the top.
Any one got any suggestions on how to achieve this?
you should position your number absolutely in order to achieve this. You could also minimalize markup by using a pseudo element, allowing you to do this with a single element.
I have also used a data-attr in order to allow you to dynamically alter the number within the div if you so wish.
Something like:
div {
width: 200px;
border: 5px solid lightgray;
box-shadow: 5px 5px 10px dimgray;
margin: 20px;
padding: 20px;
padding-left: 30px;
position: relative;
}
div:before {
content: attr(data-pointNum);
position: absolute;
top: 50%;
left: -5px;
box-sizing: border-box;
height: 40px;
width: 40px;
transform: translate(-50%, -50%);
text-align: center;
line-height: 30px;
border-radius: 50%;
border: 5px solid tomato;
background: white;
box-shadow: 5px 5px 10px dimgray;
}
<div data-pointNum="1">some text</div>
<div data-pointNum="2">some moretext
<br/>spanning multiple
<br/>lines</div>
Demo: http://jsfiddle.net/UI_Designer/xzmzpL4g/1/
.item{
border:1px solid #000;
padding:20px;
margin-left:20px;
position:relative;
margin-bottom:20px;
}
.item-number{
position: absolute;
left:-10px;
width:20px;
height:20px;
border:1px solid #ccc;
border-radius:50%;
text-align:center;
background:#FFF;
top: 40%;
transform: translate(-20%,0);
}
you can try this
$(document).ready(function() {
$('.item-number').css('top', ($('.item').height() / 2) + 'px');
});
.item-description {} .item {
border: 1px solid #000;
width: 150px;
padding-left: 20px;
}
.item-number {
position: absolute;
left: 5px;
width: 20px;
height: 20px;
border: 1px solid #ccc;
border-radius: 50%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<div class="item-number">1</div>
<div class="item-description">Text placeholder Text placeholder Text placeholder Text placeholder</div>
</div>
and this is demo
https://jsfiddle.net/0xf5hvej/
of course you will need more styling to achieve what you need but this is the basic
I have this code JSFiddle :
HTML
<div id="logo"></div>
<div id="menu"></div>
CSS
#logo {
width: 400px;
height: 100px;
margin: auto;
background-color: beige;
}
#menu {
width: 200px;
height: 100px;
margin: auto;
background-color: green;
}
#menu:hover {
border-top: 15px #f39539 solid !important;
margin-top: -15px;
}
It works very good but when i was playing with CSS values i found something that i didn't understand.
My question is why when i put value lower than -15px in margin-top, my menu div don't go up when i hover over it ?
why margin-top: -30px; is the same that margin-top: -15px; ?
P.S : 15px is also the value of my border-top-width.
UPDATE
and what is weird is when i drop border-top: 15px #f39539 solid !important; when i hover, My DIV go up without problem even when i put margin-top: -50px; ! JSFiddle
#menu:hover {
/* border-top: 15px #f39539 solid !important; */
margin-top: -50px;
}
I think if I understand what you are asking is....
What you are seeing is margin collapse.
It's when you have two adjoining margins, the largest wins - the smallest is lost.
More details here: http://reference.sitepoint.com/css/collapsingmargins
I have a facebook app and I am working on the front-end now. I am just getting started with css and html, so this might be a silly question- sorry for that.
What I am trying to do is to divide the page in two sections. I've created two divs for that, but the problem is the way they are positioned. My code is the following:
<style>
.choose_div{
width: 20%;
height: auto;
padding: 1px;
left: 0px;
border: 2px;
}
.frame_div{
right:0px;
height: auto;
width: 80%;
border: 2px 2px 2px 2px;
position: relative;
}
</style>
<div id="choose_div">
<ul>
<li class="li_choose">
<div class="li_div">
<p>Save</p>
<img src="arrow.jpg" id="arrow_save" style="width:10%;height:10%">
<hr>
</div>
</li>
</ul>
</div>
<div id="frame_div">
<iframe id="frame_opened">
</div>
I thought that right:0px; for one and left:0px;for the other would position them properly, but they are just one at the bottom of the other.
Can anyone please help with this?
This is the normal way to do what you ask, using float:left;. There were a few other issues with your styles though:
You were targetting .choose_div the class (.), not the id (#)
You need to use box-sizing:border-box when you're doing this otherwise the padding and border is added on top of width:20% making the width larger than 20%.
jsFiddle
#choose_div {
width: 20%;
height: auto;
padding: 1px;
border: 2px;
float:left;
box-sizing:border-box;
}
#frame_div {
height: auto;
width: 80%;
border: 2px 2px 2px 2px;
float:left;
box-sizing:border-box;
}
As for left and right, they can be used to align to a particular side of the screen if using position:absolute. position:relative simply shifts the element a particular amount, for example left:2px would shift the element 2 pixels to the left.
position:absolute positions the element on its closest ancestor that has a position of non-static. Then left/right/top/bottom can be used to indicate the sides of the ancestor.
for the div which to be shown write:
float:left
And for the right one:
float:right
<style>
#choose_div{
width: 20%;
height: auto;
padding: 1px;
left: 0px;
border: 2px;
float:left;
}
#frame_div{
float:right;
right:0px;
height: auto;
width: 80%;
border: 2px 2px 2px 2px;
position: relative;
}
</style>
If you add borders you must shrink your divs' witdh. Or they overflows the parent section and seen top-bottom.
<style>
html,body{margin:0;}
#choose_div{
display:block;
float:left;
width: auto;
height: 100%;
padding: 1px;
}
#frame_div{
float:right;
height: auto;
width: 80%;
height: 100%;
border: 2px 2px 2px 2px;
border-left:solid 2px #000000;
padding:10px;
overflow:hidden;
}
</style>
<body>
<div id="choose_div">
<ul>
<li class="li_choose">
<div class="li_div">
<p>Save</p>
<img src="arrow.jpg" id="arrow_save" style="width:10%;height:10%">
</div>
</li>
</ul>
</div>
<div id="frame_div">
<iframe id="frame_opened">
</div>
I have the following 4 divs with the CSS below. The problem is, the border on the red span draws over the others. How can I avoid this? I tried adding margins to spanRed, even negative margins, neither of which worked.
http://jsfiddle.net/eh9rM/
Bonus points This doesn't work in IE (8,9 tested) at all... only the blue div shows up. :)
<div id="spanBlue"></div>
<div id="spanGreen"></div>
<div id="spanOrange"></div>
<div id="spanRed"></div>
#spanBlue {position: fixed;
top: 0px; left: 0px;
height: 100%;
width: 10%;
background-color: #4D9DB8;
border-right: 10px solid #045B6F;
z-index: 1;}
#spanGreen {position: fixed;
top: 0px; left: 0px;
height: 10%;
width: 100%;
background-color: #A4AC79;
border-bottom: 10px solid #34655F;
z-index: 1;}
#spanOrange {position: fixed;
top: 0px; left: 0px;
height: 10%;
width: 10%;
background-color: #FA9D26;
border-right: 10px solid #045B6F;
z-index: 2;}
#spanRed {position: fixed;
bottom: 0px; right: 0px;
height: 90%;
width: 90%;
background-color: WHITE;
margin-top: 20px;
margin-left: 20px;
border-top: 10px solid #B52024;
border-left: 10px solid #B52024;
z-index: 3;}
You have two options:
Add div { box-sizing: border-box }. This switches the elements to the 'traditional' model, where borders and paddings are included in the width (supported from IE8+)
Use the Flexible Box model (IE10+)
Add the borders as pseudo-elements (IE8+)
Using pseudo-elements (remove the border from #spanRed):
#spanRed:after {
content:' ';
display:block;
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
border:4px solid red;
}
Bear in mind that using position:fixed as the basis for a layout is very fragile.
edit: if you need IE7 support, add the extra element via JS:
$('#spanRed').append('<span class="after" />')
Then reference it in the CSS. Be aware that you have to repeat the whole style, you can't use both selectors together otherwise IE7 ignores the rule.
Or, since these are all "useless" elements anyway, just add it to the HTML:
<div id="spanRed">
<span class="inner"></span>
</div>
Here's your code using that: http://jsfiddle.net/eh9rM/2/
I have some css problem. here is what I need.
No matter how many words the title have(example: title could be What's new today?, could be hello world)
it always have a background line pass through the whole div, and the word's background is white. (the word should be text-align:center; and it's background looks like broken the line)
Here is my code:
<style>
.ocell {
width:960px;
height:42px;
text-align:center;
padding: 20px 0 20px 0;
}
.wd {
margin: 0 auto;
background-col: white;
margin-left: -10px;
padding: 5px;
}
.line {
position: absolute;
border-bottom: solid 1px #999;
margin-top:-18px;
width: 960px;
}
</style>
<div class="ocell">
<div class="wd">Title</div>
<div class="line"></div>
</div>
also in http://jsfiddle.net/zApLA/ may be also can use a background-image instead of the line. Thanks.
This can be achieved by simply using div with border-bottom for the line, and positioning element with text on that line. Fiddle here.
Couple of problems with your CSS.
One - the .wd div spans the entire width of page (defaults to 100%)
Two - no z-index sset to say which div should be on top of which.
Try this code (worked in fiddle)
.ocell {
width:960px;
height:42px;
text-align:center;
padding: 20px 0 20px 0;
}
.wd {
margin: 0 auto;
background-color: #f0f;
margin-left: -10px;
padding: 5px;
font-size:20px;
z-index:10;
border:1px solid #f0f;
display:inline;
}
.line {
position: absolute;
border-bottom: solid 1px #999;
margin-top:-15px;
width: 960px;
z-index:-1;
}