What would i put in the css to have one div ontop of another div (both squares are 10x10) and have another column with a div that is 10x20?
Let me rephrase that so its a little simpler, i want one big square that's 20x20. On the left half of that shape, it needs two 10x10 squares, one ontop of the other. On the right side, i need a div that is 10x20.
Please help need this for a class
You can use css's position property to absolutely position elements to set top and left coordinates. You'll also need to use the height and width properties to size the boxes.
Maybe something like this?
<div id="bigBox">
<div class="leftBox"></div>
<div class="leftBox"></div>
<div id="rightbox">
</div>
<style>
#bigBox { position: relative; width: 20px; height: 20px;}
.leftBox {position: absolute; left: 0; height: 10px; width: 10px; }
.rightBox {position: absolute; right: 0; width: 10px; height: 20px;}
</style>
Related
I've been handed a bunch of pages to code up with weird irregular layouts. Below is an example of what I need to create.
The key points about this are;
The elements need to be positioned pixel perfect as per the mockups.
Upon window resize, all elements and the positions need to size down/up
proportionately.
The size of the container needs to resize proportionately also, because there will be more content under the layout.
Considering each element needs to have specific positioning, it's obvious to use absolute positioning. I also note that because the layout needs to stay proportionate, positioning needs to be done in percentages.
For images I can set the widths to be a percentage and height auto. And elements can be positioned with a percentage along the x axis.
But the problem arises when I need to position from the top.
If I declare an element to be say 20% from the top, this positioning won't change proportionately when I resize the page. Also, the containing block will need to have a declared height.
The only way I can see this working is with some javaScript trickery.
But this seems fussy for a seemingly simple layout. And it's not advisable to rely on javaScript to maintain a layout.
There must be a better solution, I've seen irregular layouts like this often.
I've looked into Flexbox, but I can't think of how it can help me in this situation.
How would you tackle this layout?
You can wrap everything in a wrapper that uses the "padding-bottom trick" to maintain its ratio based on its width. Because the height of the parent element is now dependent on the width of the document, all percentage values you give to top and bottom properties of child elements will be affected by the width of the page, instead of the height.
main {
position: relative;
width: 100%;
height: 0;
padding-bottom: 120%;
}
div {
background: red;
position: absolute;
}
.one {
width: 40%;
height: 40%;
top: 10%;
left: 40%;
}
.two {
width: 50%;
height: 20%;
top: 55%;
left: 15%;
}
.three {
width: 20%;
height: 30%;
top: 60%;
left: 70%;
}
<main>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</main>
Try using this trick to scale your container proportionally
<div class="container">
<div class="container-inner-wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
.container {
position: relative;
display: inline-block;
width: 75%; // Choose the width you want.
}
.container:after {
padding-top: [$height / $width * 100] %;
content: '';
display: block;
}
.container-inner-wrap {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
Where $height and $width are numbers - the value of the height and width you want your container to be. The real value you should put in there is what you get when you divide the ideal height by the width and multiply that by 100% (the unit is going to be %). What you get then is the aspect ratio of your container, and it will stay that size and shape no matter your browser size.
You can use that on all your boxes too, just make sure that you have that inner wrap that's absolutely positioned just inside. If I was building this layout, I'd use this trick for sure.
Here's an example of someone else using this: http://wellcaffeinated.net/articles/2012/12/10/very-simple-css-only-proportional-resizing-of-elements/
I'm essentially displaying a banner image on a page. At the base of that image is an overlay (the abs. pos. div) with a semi-transparent background image to make a "see through" effect. Everything is positioned properly and working fine except the overlay at a width of 100% expands outside of my container div. I've tried setting the overflow to hidden of the container div but that does not seem to work. My parent container has a position relative as well. This is responsive so the overlay with need to shrink and expand to the image width. Here's my code:
.hero-img-wrap {
position: relative;
margin-top: 35px;
padding-left: 15px;
padding-right: 15px;
}
.hero-img-wrap img {
width: 100%;
height: auto;
}
.hero-img-wrap .trans-overlay {
position: absolute;
bottom: 0;
z-index: 9;
height: 19px;
background-image: url('../images/semi_transparent_white.png');
width: 100%;
}
<div class="hero-img-wrap">
<img src="images/banner_image.jpg" alt="">
<div class="trans-overlay"></div>
</div>
I could pull this off with JQuery but I'd like to avoid that. For what it might be worth - this code is within a Bootstrap 3 column.
Since you've defined the height, why not a negative value
position: relative;
top: -19px;
Just a thought, heres a fiddle for ya
http://jsfiddle.net/g11yggap/
Try
Width:inherit;
On overlay div
Say I have two divs A and B, which are currently aligned side by side. How can I get A to be separated from B by 50px, while still letting A to take up 70% of the remaining space and B the remaining 30%?
EDIT: Accepted the answer a little early before I actually tried. Whoops.
JSFiddles:
A Tale of Two Divs
Now separated, but now with the second one on a second line?
Try this out if it solves your problem.
<html>
<head>
<style type="text/css">
#Content
{
border: 3px solid blue;
position: relative;
height: 300px;
}
#divA
{
border: 3px solid red;
position: absolute;
margin-right: 25px;
left: 5px;
top: 5px;
bottom: 5px;
right: 70%;
}
#divB
{
border: 3px solid green;
position: absolute;
right: 5px;
top: 5px;
bottom: 5px;
left: 30%;
margin-left: 25px;
}
</style>
</head>
<body>
<div id="Content">
<div id="divA">
</div>
<div id="divB">
</div>
</div>
</body>
</html>
just set the margin-left or padding-left of div B
I believe your selected answer will not work:
http://jsfiddle.net/cNsXh/
edit:
Sorry, the above example was not correct at first. Now it is.
/edit
As you can see, div #b will move under div #a because margin-left (or padding-left) will be added to the 30%. And because we're mixing percentage with pixel values here, we will not be able to define values that will guarantee to always add up to exactly 100%.
You'll need to use a wrapper for div #b which will have 30% width, and not define a width for div #b, but define margin-left. Because a div is a block element it will automatically fill the remaining space inside the wrapper div:
http://jsfiddle.net/k7LRz/
This way you will circumvent the CSS < 3 box-model features which oddly enough was defined such that defining a dimension (width / height) will NOT subtract margins and/or paddings and/or border-width.
I believe CSS 3's box-model will provide more flexible options here. But, admittedly, I'm not sure yet about cross-browser support for these new features.
#wrongusername; i know you accept that answer but you can check this solution as well in this you have no need to give extra mark-up & if you give padding to your div it's not affect the structure.
CHECK THIS EXAMPLE: http://jsfiddle.net/sandeep/k7LRz/3/
http://jsfiddle.net/efortis/HJDWM/
#divA{
width: 69%;
}
#divB{
width: 29%;
margin-left: 2%;
}
I need to make a div be visible (for use of it's background) even though it will not contain anything, but not push other elements down.
My layout looks like this:
/----------------a--------------------\
|-------------------------------------|
|________________b____________________|
The one labeled a needs to be visible but it will contain nothing. This is so the background image can make box b look like it has some gloss on the top, and box b will contain the text. However, the text in box b needs to start at the top of box a, not underneath it, which is the default behaviour.
So box a needs to act like it doesn't exist as far as layout goes, but needs to act like it exists for the purposes of background image.
To deomonstrate, this is what it looks like now, the default way:
/-------------------------------------\
|-------------------------------------|
| there is some text here |
|_______and more text down here_______|
but I want it to be
/-------------------------------------\
|-------there is some text here-------|
|_______and more text down here_______|
CSS:
#box {
position: relative;
z-index: 1;
width: 300px;
margin: 100px;
}
#boxa {
position: absolute;
z-index: -1;
top: -20px;
left: -10%;
width: 120%;
height: 50px;
background: #0f0;
}
#boxb {
background: #eee;
height: 200px;
}
HTML:
<div id="box">
<div id="boxa"></div>
<div id="boxb">text goes here</div>
<div>
I think you need to set the original stacking context on a wrapper so both boxes are in the same contest, then you can put box a in box b and negative z-index box a
updated: you don't need to put box in box b once they're both in the same staking context
See working example: here & updated to show boxes don't need to be nested : here
Setting a top and left value combined with position:absolute should remove it from the document flow.
Add this to the style for that div
position:absolute;
<div style="Position:Absolute; Z-Index: (HIGH Number to appear ON TOP, Low number to be concealed) >
</div>
Either set the background on b (simple, don't know why you wouldn't), or absolutely position a inside b.
Edit: or, as clairesuzy says, put a after b, in the same container.
See below. You can change the width / height to match the size of your background image.
http://jsfiddle.net/DhS3D/4/
HTML...
<div id="b">
<div id="a"></div>
This is some text.
</div>
CSS...
#a {
position: absolute;
z-index: -1;
width: 100%;
height: 30px;
background-color: #ccc;
}
#b {
position: absolute;
z-index: -2;
width: 100%;
height: 100px;
background-color: #999;
}
try using position absolute or relative depending on what it is
How to horizontally center a floating element of a variable width?
Edit: I already have this working using a containing div for the floating element and specifying a width for the container (then use margin: 0 auto; for the container). I just wanted to know whether it can be done without using a containing element or at least without having to specify a width for the containing element.
Assuming the element which is floated and will be centered is a div with an id="content"
...
<body>
<div id="wrap">
<div id="content">
This will be centered
</div>
</div>
</body>
And apply the following CSS:
#wrap {
float: left;
position: relative;
left: 50%;
}
#content {
float: left;
position: relative;
left: -50%;
}
Here is a good reference regarding that.
.center {
display: table;
margin: auto;
}
You can use fit-content value for width.
#wrap {
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: auto;
}
Note: It works only in latest browsers.
This works better when the id = container (which is the outer div) and id = contained (which is the inner div). The problem with the highly recommended solution is that it results in some cases into an horizontal scrolling bar when the browser is trying to cater for the left: -50% attribute. There is a good reference for this solution
#container {
text-align: center;
}
#contained {
text-align: left;
display: inline-block;
}
Say you have a DIV you want centred horizontally:
<div id="foo">Lorem ipsum</div>
In the CSS you'd style it with this:
#foo
{
margin:0 auto;
width:30%;
}
Which states that you have a top and bottom margin of zero pixels, and on either left or right, automatically work out how much is needed to be even.
Doesn't really matter what you put in for the width, as long as it's there and isn't 100%. Otherwise you wouldn't be setting the centre on anything.
But if you float it, left or right, then the bets are off since that pulls it out of the normal flow of elements on the page and the auto margin setting won't work.
The popular answer here does work sometimes, but other times it creates horizontal scroll bars that are tough to deal with - especially when dealing with wide horizontal navigations and large pull down menus. Here is an even lighter-weight version that helps avoid those edge cases:
#wrap {
float: right;
position: relative;
left: -50%;
}
#content {
left: 50%;
position: relative;
}
Proof that it is working!
To more specifically answer your question, it is probably not possible to do without setting up some containing element, however it is very possible to do without specifying a width value. Hope that saves someone out there some headaches!
Can't you just use display: inline block and align to center?
Example.
for 50% element
width: 50%;
display: block;
float: right;
margin-right: 25%;