Related to this question.
Here's a fiddle: http://jsfiddle.net/DRbRS/
Notice how the red-outlined list div does not align at the bottom of the green container div.
The problem is that there is no way of knowing ahead of time what the resulting height of the list ought to be, even if the height of the header is known.
Is there any way to deal with this without resorting to javascript?
What we need is a style like height: fill;
Using position: absolute and setting top, left, right, and bottom: http://jsfiddle.net/QARC9/
This article describes why it works.
http://www.alistapart.com/articles/conflictingabsolutepositions/
Replace your CSS with this
#container {
left: 50px;
width: 200px;
position: fixed;
height: 90%;
border: 2px dashed green;
}
#header {
height: 30px;
line-height: 30px;
text-align: center;
border: 2px dashed blue;
margin-left:-2px;
margin-top:-2px;
width:200px
}
#list {
border: 2px dashed red;
overflow: auto;
height: 91%;
width:200px;
margin-left:-2px;
margin-top:-2px;
}
or see the demo here http://jsfiddle.net/enve/DRbRS/3/
Related
im trying to set this up as a div block centered in a section, not sure how to make the divs borders look like so. The top right and left corner have the crisscross effect. Was thinking maybe two divs with absolute positioning, then a div wrapping both of them with relative positioning
You could use a pseudo element for the second border:
.crisscross {
border: 1px solid #aaaaaa;
height: 50px;
position: relative;
width: 50px;
}
.crisscross:after {
border: 1px solid #aaaaaa;
content: "";
height: 100%;
margin: 5px;
position: absolute;
width: 100%;
}
<div class="crisscross"></div>
I have this code of my div. I want to alight some text inside. The text has to be aligned to the left curv of the div. How can this be possible?
Thank you!
Here is the code of the div:
#cv {
position: absolute;
top: 10%;
left: 30%;
width: 300px;
height: 600px;
background-color: #ffffff;
border: 1px solid #ff0000;
border-radius:300px 0px 0px 300px;
padding: 10px;
}
I believe you want the text to follow the semi circle, and not just have an ordinary align left along a straight edge. This is not (yet) possible with a simple css property. There are some hacky techniques like this however:
http://www.torylawson.com/mw_index.php?title=CSS_-_Wrapping_text_around_non-rectangular_shapes
There are even a tools to help you, like this one:
http://www.csstextwrap.com/
Adobe is pushing a new css property to wrap text:
http://www.adobe.com/devnet/html5/articles/css3-regions.html
It should be already available in Chrome Canary, but I suppose that is of little use for you today. I think you will have to do with a hack today...
Working example: http://jsfiddle.net/mQFK6/4/
You want to add a <p> to hold the text, and then move it down 50% to the middle of the circle, and float it left
#cv {
position: relative;
top: 10%;
left: 30%;
width: 300px;
height: 600px;
background-color: #ffffff;
border: 1px solid #ff0000;
border-radius:300px 0px 0px 300px;
padding: 10px;
}
p{
top: 50%;
position: relative;
float: left;
margin-left: 5px;
}
UPDATE: Here's a jsFiddle.
I want it to look like this:
... but it looks like this:
The #container is horizontally centered, and must stay so. Can't seem to get this right...
this happens when you float boxes side by side, one box to the left, the other to the right, both having width:50%. But padding, margins and border unintentionally increase the width of the boxes causing them to be more than 50% and forcing the right box to move under the previous box.
try setting static width to the boxes (will need calculation)
http://jsfiddle.net/fuYYv/
Bryan Downing in the comments gave me a clue.
I added
footer #container {
position: relative;
top: -XXXpx;
}
Works perfect. Big thanks to you wizards :)
This should be useful for others. jsFiddle with answer. Code below:
header, #container, section, footer, footer img#iphone { display: block; }
header {
background: url('images/header.jpg') repeat-x;
height: 160px;
border: 5px solid #aa3;
color: #aa3;
}
header img#logo {
margin: 0 auto;
}
#container {
width: 550px;
margin: 0 auto;
overflow: hidden;
border: 5px solid #33a;
color: #33a;
}
section {
float: left;
width: 310px;
height: 200px;
border: 5px solid #3a3;
color: #3a3;
}
footer {
background: url('images/footer.jpg') repeat-x;
height: 150px;
border: 5px solid #aa3;
color: #aa3;
}
footer #container {
position: relative;
top: -320px;
}
footer img#iphone {
float: right;
height: 400px;
width: 204px;
border: 5px solid #a33;
color: #a33;
}
I am trying to vertically center one div (containing a search bar) inside another (a top banner). I was under the impression that to do so you did the following:
#banner {
height: 35px;
width: 100%;
}
#searchbar {
height: 15px;
position: relative;
top: 50%;
margin-top: -7.5px; /* half of the height */
}
This works fine until you add the margin-top at which point it is applied to the #banner as well.
Is there an alternative way to do this, or am I just doing it wrong?
Here's a jsFiddle of my actual code.
I use line-height with the value being the same as height of parent div.
As seen here: http://jsfiddle.net/vkJ78/24/
CSS:
#banner {
background-color: #770E17;
height: 35px;
width: 100%;
border-bottom: 1px solid #333;
}
#src {
width: 300px;
height: 15px;
border: 1px solid #333;
padding: 3px;
}
#srcdiv {
width: 308px;
margin: 0px auto;
position: relative;
line-height: 35px;
}
EDIT: Per recommendation from NGLN, this will also fix horizontal centering, #srcdiv and #src having equal widths.
You have to add overflow: hidden to #banner. To clear the float, I guess.
Then, modify the negative margin to margin-top: -11px in #srcdiv (you have to sum the div height, the border, and the padding for the total height)
http://jsfiddle.net/vkJ78/1/
Give margin:0px and padding:0px and remove margin-top
body {
margin:0px;
padding:0px;
}
I'm trying to float a div over another one but in the center (width).
EDIT: I want the container div to be over the top div and centered.
Current CSS:
body {
background-color: #FFF;
margin: auto;
}
#top {
background-color: #F2F2F2;
border-bottom: 1px solid #CCC;
height: 150px;
position: relative;
}
#container {
background-color: #FFF;
border: 1px solid #CCC;
width: 920px;
height:300px;
position: absolute;
top:0;
right:auto;
}
This is what i get:
set left:50%
and margin-left:-460px (half the width of the div)
Try this. It's untested but you basically need to set the container div to relative and then the div inside that to absolute.
body {
background-color: #FFF;
margin: auto;
}
#top {
background-color: #F2F2F2;
border-bottom: 1px solid #CCC;
top: 50%;
left: 50%;
position: absolute;
}
#container {
background-color: #FFF;
border: 1px solid #CCC;
width: 920px;
height:300px;
position: relative;
right:auto;
}
I would suggest setting #top's position attribute to absolute and using a little javascript to set the left attribute to #container's left + half of #container's width - half of #top's width.
i.e, after including jQuery (untested):
$(document).ready(function(){
var topLeft = $("#container").css("left") + ($("#container").css("width")/2) - ($("#top").css("width")/2);
$("#top").css("left", topLeft);
});
In the case that left is zero, like the example you gave, that $("#container").css("left") term is unnecessary.
EDIT: You'll also have to be sure to set the z-index attributes of the two divs appropriately.