I have those 2 divs nested into the yellow div, and as you can see the green one is getting under the red one. I would like the green one to sit to the right of the red one. How can I do that? Thanks a lot
The screen shot is at:
http://i.stack.imgur.com/7cbCI.png
here is my code:
.reddiv {
height: 100px;
width: 150px;
background: red;
float:left;
margin:5px;
}
.greendiv {
height: 70px;
width: 300px;
background: green;
}
Add float:left to both red and green div and you should be set.
Be warned though that if you need to have another content below yellow div, your content might seem to ignore the height of your yellow div. To tackle that issue, easiest way is to add a third div with clear:both inside the yellow div
Related
I am almost certain that this is not possible to create, but I have to ask. So I have those 3 divs. One is main wrapper, other is green one on the right side, and 3rd is the small one. So what would I like is to make that small div transparent all the way down to wrapper. So that it doesn't have green background, but the smiley one. Don't think it's possible, but then again, I might be wrong. I know I can split the green div in 4 blocks and "wrap" the transparent one, but that won't work because I have border radius on the small one.
UPDATED:
http://jsfiddle.net/9hLf8mcu/3/
Just add this background: url('http://superlifestylecoach.typepad.com/.a/6a0120a9506f8e970b01348158e534970c-pi');
background-position:center right; to your .same_as_blue {
DEMO
It is not possible with pure css as you would need to have the green div to be transparent too, which it obviously isn't. A work around would be to give your small square the same background as the one you want it to have and then use background-position to move the image to where you want it
.blue {
width: 200px;
height: 200px;
}
.blue,
.same_as_blue {
background: url(http://lorempixel.com/200/200/) left top no-repeat;
}
.green {
width: 50px;
height: 100%;
background: green;
float: right
}
.same_as_blue {
width: 40px;
height: 40px;
background-position: -150px top;
}
<div class="blue">
<div class="green">
<div class="same_as_blue"></div>
</div>
</div>
Your fiddle updated - If you move the background:green you will see the little image matches up nicely
I really like Anthony's answer using the duplicated background. Another solution would be to look into the clip and mask features of CSS.
I have a problem in Chrome with this example
This is a responsive bootstrap design..
When the width is less than 1000px the green block should press the blue bar down, but in Chrome the blue bar keeps the same position and the green block is layered under it..
http://www.bluemachines.dk/_bootstrap/break/
You have specified height for the '#presentation' div: 385px. The green box in inside this box.
The '#statistics' div is clearing the '#presentation' div so it will sit after the 385px.
SOLUTION:
Either increase the height of the '#presentation' div to include the height of green box.
Or
Remove the height from the '#presentation' div.
Try moving statistics to a new row div!
because fix width is give for classes under .col-md-12
#slideshow {
position: relative;
float: left;
height: 380px;
width: 570px;
background: rgba(0,0,0,0.1);
}
#register {
float: right;
height: 380px;
width: 20%;
background: green
}
use can use bootstrap classes for giving width
I need both divs to have dynamic width.
The gray one has to be centered, while the blue one to float right BUT both be horizontally alingned.
These to are sitting in a wrapper.
The problem is that in order to have varying width I use display:block and this makes the gray div to push the other one down.
How can I manage this without setting a fixed width for the gray div?
EDIT
This is how it should look like. I just put another left floating div.
The red div has to be perfectly centered.
All divs' width must be dynamic.
You can nest the blue div within the grey one and absolutely position it, using left:100% will make it horizontally dock to the right side of the grey div.
Just one of many options.
Here is a demo: http://jsfiddle.net/HnsEx/
Here's a fiddle :)
fiddle
and css
#parent {
overflow: hidden;
border: 1px solid red
}
.right {
float: right;
width: 100px;
height: 100px;
background: #888;
}
.left {
overflow: hidden;
height: 100px;
background: #ccc
}
-edit- sorry i put in a lot of useless info. In short i want a static div that i can set the left and right of (from top to bottom) which i can fill and it should be on top of my background image but below the text in the sidebar.
long version:
I am hacking something in wordpress. I need the sidebar to have a green background. Theres two problems. 1) Is if i make #secodary green i have a TON of whitespace on the left and it looks wrong (but to the right the menu also looks wrong)
2) I need the color to go to the bottom of the page. I dont know how long a page will get.
I think using a fixed place div that is from X to Y (maybe 80 to 300) green. I just dont know how to do it as my css and html-fu is weak. I'll note that i have a background image but the menu is on white which is coming from something else. I dont know if its from #main (post+sidebar) or #primary(post) since changing primary bg color did change the sidebar menu (i bet the theme is using float somewhere...)
Instead of having that tiny little thing green i want it from the left (where the red starts) to the right where i marked with my poor paint.exe job. Also the green should go all the way down. The black circle in the css shows that it isnt simple to do in css which is why i want to hardcode a green box into it
Ok, here is the simplest way to code a position: fixed; div. (with words and white areas as shown in your paint img)
HTML:
<div id="greenBox">
<p>About us</p>
<div class="white">
</div>
<p>Services</p>
<div class="white">
</div>
</div>
CSS:
body /*jsfiddle only, so you can see the fixed effect*/
{
height: 1000px;
background: -webkit-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);
}
#greenBox
{
position: fixed;
height: 400px;
width: 250px;
background-color: #008000;
}
.white
{
background-color: #fff;
width: 90%;
height: 100px;
margin: 0 auto;
}
Example for you here.
I made a JFiddle for you here;
http://jsfiddle.net/sfnGH/
#secondary{
position: absolute;
background: green;
top: 0;
left: 0;
height: 100%;
width: 300px; /*or however long you want it to be*/
z-index: 999; /*So it stays on top. I think that's what you wanted?*/
}
Is that what you wanted?
Edit: As pointed out in a comment to my answer you asked for position: fixed;
Before you decide to use that as a left bar there is at least one thing to keep in mind.
It will stay in the fixed position when scrolling. This means, that if you have a lot of content in the sidebar you would never see the bottom part of it on smaller screens.
For a more thourough explanation of differences in positioning you can check out this link: http://css-tricks.com/1191-absolute-relative-fixed-positioining-how-do-they-differ/
Whatever you decide to use I hope you end up with an awsome site.
suppose we have a visible area 300 x 200 pixels
suppose we have an image of any size. It can be bigger or smaller than the visible area.
Question:
1.center the image vertically and horizontally inside the visible area. Crop overflowing parts of the image
1a. vertical centering is unimportant and can be omitted
2.draw the border around the visible part of the image. Note that the border can match either the outer div border or image border
2a.clarification: I want to find the way of (for example) creating the third div whose borders would repeat the borders of the visual part of the image
Cropped or not, in browser has to be seen the border around the visible part of the image
mercator has already done some of the job here as described below:
You can make it work if you wrap
another element around the image:
<div class="outer">
<div class="inner"><img src="" alt="" /></div>
</div>
And the following CSS:
.outer {
width: 300px;
height: 200px;
border: 1px solid red;
overflow: hidden;
*position: relative;
}
.inner {
float: left;
position: relative;
left: 50%;
}
img {
display: block;
position: relative;
left: -50%;
}
The position: relative on the
'outer is marked with * so it will
only work in IE6/7. You could move it
to a conditional IE stylesheet if
that's what you prefer, or remove the
* altogether. It's needed to avoid
the now relatively positioned children
from overflowing.
I'm not to sure what you mean by your 2d clarification, but I think you can achieve this with the follow markup:
<div class="outer"></div>
and css:
.outer {
width: 300px;
height: 200px;
border: 1px solid red;
background: #fff url(/path/to/image.jpg) 50% 50% no-repeat;
}
This will create a div of 300x200px with a 1px red border. It will then position an image in the div centered vertically and horizontally, or default to white the image cannot be found.
The border, you'll need to draw in another fashion. Simple borders can be added using css. More complex borders and shadows are limited in css and only implemented in some browsers, but you can use javascript to help you add a more complex shadow. There are many snippets and jQuery plugins that can help you.
You can center the image in the visible area by giving it margin-left = margin-right = auto.