I have a problem and I guess there is a common solution but i didn't know how to search for it properly.
I want 2 div floating next to each other, both take 50% each of the width. Now I want to give each of them some padding. What happens is, that they wrap around, instead of being displayed next to each other, because they are bigger then 50% now. What's the hack here?
some code:
#nw_main_line1_l {
height: 512px;
width: 50%;
float: left;
padding-right: 11px;
background-color: red;
}
#nw_main_line1_r {
height: 512px;
width: 50%;
float: left;
padding-left: 11px;
background-color: green;
}
What happens here is that the green one is below the red one. If i delete the paddings, everything is fine and they float like excepted.
kind regards :)
This is due to the padding. You can either reduce the width or use the modern way with:
* { box-sizing: border-box; }
More info on box-sizing here.
You basically found the answer of the problem yourself, but did not explicitly name it.
Removing the padding fixes the issue. And if you would exchange the padding for a border (or use both) you will notice that the boxes are broken again.
This is due to the fact that at least in Firefox' box model the resulting box width (e.g. of a div) will be
2 * [Border-Width] + 2 * [Padding-Width] + width
Maybe you can use CSS3 flexible boxes to conveniently circumvent your issue.
Related
http://www.remotegoatdesign.com/sayhey/pages/edit-valentines-marc-card.html
Doing this site for an assignment due tomorrow. In the proccess of making it responsive.
I am having an issue with the last color block, although its put into its container using percentages, it keeps moving out. In chrome its outside it straight away, whereas in Firefox its only when I resize. Although the difference is only a few pixels, so I'd assume its to do with the monitor size.
Any ideas guys? I'm stumped.
Try add this code snippet into your css file.
#tab-1 > div > div
{
width: 8%;
}
You can change the width.
Good Luck!!
Try using property " display:inline-table " for the class color_container
and give margin for the smaller color divs for space inbetween
try putting slightly smaller percentages(in the color block) and test it until it looks good. also it fits right in wider monitors as you say, because you have one css, that is best for wide screens. the point of responsive design is to have more than one media queries if the one you have breaks the design in smaller screens. so either make the color blocks really small, or myou should make more media queries
Your issue here is display: inline-block;. When you use it, it adds an extra space between elements. If you want to sort out this, you have 2 fixes:
a) negative margin-right
.box {
display: inline-block;
width: 8.74%;
height: 100%;
margin-right: -4px;
}
b) font-size: 0; on the container and default font-size on the elements inside
.color_container {
width: 98%;
height: 60px;
min-height: 60px;
padding: 5px;
background-color: #fff;
font-size: 0;
}
.box {
display: inline-block;
width: 8.74%;
height: 100%;
font-size: 1em; /* or what is your default font-size */
}
I have a div within a div. I want one to extend out of the shell div so it resembles a tab. I thought just using absolute positioning with a negative value would push it out of the parent div. That doesn't seem to work. Is there a CSS work-around?
Example
http://jsfiddle.net/W3CyT/
http://jsfiddle.net/iambriansreed/W3CyT/4/
CSS
#sideWall {
height:100px;
width:100px;
position:absolute;
top: 10;
left: 10;
background: black;
margin-top: 60px; /* give room for tab */
}
.showSideWall {
height: 60px;
width: 30px;
position: absolute;
top: -60px; /* move tab above container */
right: 0;
background: red;
}
You're doing it correctly, however, you need to rethink your values for bottom and right.
If you're looking to have the red box protrude from the black box on its right side, consider removing right:0 and applying left:100% instead. This approach guarantees that no matter how wide the black box and red box are, the red box will always be on the outside to the right; they are width-size agnostic. This can be ideal because you may want to change the size of either box dynamically or in the future (it doesn't lock you in to hard set values).
Here's a fiddle of what I'm talking about.
You could use a Z-Index and position one on top of another. There is a better way to do it with Twitter bootstrap code.
http://twitter.github.com/bootstrap/
they give you templates for all kinds of cool features
I have an image with float:left, and I’d like it to overflow its parent, but cut off the overflow. Here’s what it looks like without any overflow rules:
Here’s what I want:
Here’s a fiddle: http://jsfiddle.net/ZA5Lm/
For some reason, it was decided that overflow:hidden without an explicit height results in the element growing.
Can I somehow achieve the effect I’m after without setting an explicit height? An explicit height doesn’t work because I want this div to size automatically based on content length and browser width.
In my opinion using overflow: hidden without setting dimensions doesn't make sense. If you don't want to specify the height of the container and if your images have a fixed width you could use this solution: http://jsfiddle.net/ZA5Lm/11/
The image is positioned with absolute, taking it out of the text-flow. However - and I'm aware that this may be ugly - you need to specify a padding-left to move the text away from the image.
It's a bit tricky (I use relative + absolute positioning and a specific padding to position text) but it does the effect you asked without changing markup or setting height:
body {
padding: 10px;
}
img {
float: left;
position: absolute;
left : 10px;
}
div {
border: 1px solid black;
padding: 10px 10px 10px 280px;
position : relative;
overflow: hidden;
}
I just inserted style (even if float:left would be no longer necessary)
I seen a post over at CSS-Tricks and it talked about this. Go check it out at -
http://css-tricks.com/minimum-paragraph-widths/
It might be useful :) Good luck
Also just looked at your code and I added float: right to your div so it looks like this -
div {
border: 1px solid black;
padding: 10px;
float: right
/*overflow: hidden;*/
}
Not sure if that's what you want?
I have fairly simple layout, like this:
<div class="card">
<span class="attack">1</div>
<span class="defence">2</div>
</div>
They're arranged on top of each other with simple display: block. What I want to achieve is when a card is in specific areas, "attack" shows on bottom and "defence" is on top. I know I can make it with jQuery, but can I achieve the same effect using pure CSS?
Technically, this is a business rules thing, which is not the domain of your cosmetic layer.
In an HTML document, the order of elements from first to last has semantic meaning - your case is not different, I suspect, in that you are trying to indicate some difference in importance from one element to the next (in the document, not just the visual representation) depending on the context.
So your approach should be JQuery, or some other method of changing the meaning of the relationship of these two elements in terms of their order in the document. CSS is intended to change only their cosmetic appearance.
With situations like this, it can be helpful to think, "what if someone could not see the elements, and had to rely on a screen reader to read them in the order they appear in the document? Would this information (not just the content of the two elements, but their relationship) still be correct and comprehensible?"
You may not intend for this to be accessible to the blind, but that's often a good sanity check for how to approach a problem like this.
I'm pretty sure this will work:
.card {
width: 100px;
height: 150px;
float: left;
}
.attack, .defence {
width: 100px;
height: 75px;
clear: right;
}
/* Play with height and padding-top of .defence to
get the text to the very bottom */
.attack-top .card .attack {
float: left;
}
.attack-top .card .defence {
float: right;
height: Wpx;
padding-top: Xpx;
}
/* Play with height and padding-top of .attack to
get the text to the very bottom */
.defence-top .card .attack {
float: right;
height: Ypx;
padding-top: Zpx;
}
.defence-top .card .defence {
float: left;
}
There are a few details missing in your description, so I'll try to fill in my assumptions, and you can let me know if they're valid or not.
You said "when a card is in specific areas". I'll assume these areas can be represented by different containing classes (.attack-top and .defence-top, but rename as you see fit).
I'm assuming that a .card is 100px wide and 150px tall. If these width and height values are wrong, fill in the correct ones and make the appropriate recalculations. If .card doesn't have fixed width/height, it may still work, but I'm less confident, and you won't be able to get the bottom text to go to the very bottom of the card (just below the top text).
The first thought is to use absolute positioning within .card.
.card { width:100px; height:50px; position:relative; }
.attack { width:100px; height:25px; position:absolute; top:25px; }
.defense { width:100px; height:25px; position:absolute; top:0; }
In this example, .attack will be (visually) below .defense. But note, if you disable CSS, the true arrangement will be seen.
If you know the height of the element, you can use position: relative (with positive and negative values, respectively) or position: absolute. But this is all very hacky and comes with a lot of side-effects - I would do it in Javascript instead.
You can do this by using (if you only want to do the swap in div.card):
.card .attack {
position: relative;
top: 1em;
}
.card .defence {
position: relative;
top: -1em;
}
But as others have mentioned this can have some unintended side-effects. E.g. the above sample will move swap position correctly only for 1 line blocks.
No, you can't. Even if you decided to try to "hack" it out in CSS, the resultant CSS would be huge, messy, and not easily maintained. The corresponding jQuery code would be very simple by comparison, easily understood, and easily maintained.
I'm trying to create a dynamic site where I have three floating boxes next to eachother. They are 33.33% in width each. The container div around them is 75% in width.
I've found an article about the problem here: CSS: Jumping columns
I've also found an example of the same problem here: Jumping columns example
Drag the window size to see the jumping in IE7 or earlier.
Anyone knows if it's possible to get around this? (without Javascript)
I use two different solutions depending on the situation. First, try the Nicole Sullivan approach (using overflow: hidden; on the final element in a row instead of float/width):
http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/
.container {
width: 75%;
}
.box1 {
width: 33.33%;
float: left;
display: inline; /* fixes another IE bug */
}
.box2 {
overflow: hidden;
}
This works in most cases.
Failing that, I add a negative margin of several pixels to the last element instead.
.box2 {
width: 33.33%;
float: left;
display: inline; /* fixes another IE bug */
margin-right: -3px;
}
If that last element is floated right instead, just add the negative margin to the left. So far that has worked for me in the few cases where overflow didn't fit.
In a situation like this, I would tend to get round the problem using an IE-only stylesheet that fudges the values until they work. In this case, just set the widths to 33%, it won't be perfect but then that's just the nature of the web.
I think that a simple answer might be to not round at all, just create a final "spacer" element with a 1% width that shares the look of the 1/3rd elements. Even IE should be able to deal with a 33 + 33 + 33 + 1 rounding.
I had the same problem. ie7 did not render 33.33% correctly. It would work with 33% but then it was a hairline off. I used the advice from the second block of code in the first response above, plus a little ie hack. It worked for me, I hope it helps.
.all-boxes {
width: 33.33%;
float: left;
display: inline;
*margin-right: -1px; /* Add the asterisk */
}
The margin value might need to change based on your implementation, but 1px worked for me.