How can I prevent the last div (class) from going under? I put margin-right on .artist_wrap. I thought when I put overflow: hidden it'll stay inside #music_videos_wrap but it disappears. Thanks to anyone who'll help me.
HTML:
<div id="music_videos_wrap">
<div class="artist_wrap"></div>
<div class="artist_wrap"></div>
<div class="artist_wrap"></div>
<div class="artist_wrap"></div>
</div>
CSS:
#music_videos_wrap{
float:left;
margin:0 0 0 23px;
width:944px;
height: 257px;
background-color: red;
/*overflow:hidden;*/
}
.artist_wrap{
float:left;
width:190px;
height:257px;
background-color: green;
margin:0 62px 0 0;
}
First of all, you measurements are somewhat wrong, you need the wrapper to be 946px wide to fit the elements you want, alternatively change the width of the .artist_wrap. After fixing that, you could set margin-left:62px to .artist-wrapp instead of the right-margin. That way you could use margin-left:0 on first-child (which is more cross browser than last-child):
.artist_wrap:first-child { margin-left:0; }
See jsfiddle: http://jsfiddle.net/Rkp3Z/
your .artist_wrap width is too big
you should use firebug and adjust it see what is the max value that can fit in the parent's width
here you go with 150px as width
or compute it from the parents width subtracting the margin, borders and padding
944px parents width / 4 divs = 236 width per artist child
if you put right margin to each .artist_wrap you need to subtract this margin from the width to make it fit in the parent's 944 px width
which means 236 - 62 = 174px as width for artist_wrap
you can also apply margin:0 31px for artist_wrap to have a symmetric layout
Related
Take a look at my snippet.
The parent div has a scrollbar and a child div.
Why is the padding (5px) missing on the right side?
#moh
{
background:red;
overflow-x:auto;
width:100px;
padding:5px; // this padding should be on all 4 sides
}
#moh div
{
width:500px;
height:50px;
background:green;
}
<div id="moh">
<div></div>
</div>
To get the bounty I want to know the reason for the missing padding. Maybe there is a name for this phenomenon. Or may it be a browser bug?
It would be excellent to know the part in the CSS or HTML specification which is responsible for the missing padding. But this is not required to get the bounty (Because I know it's hard to find).
#moh
{
background:red;
overflow-x:auto;
width:100px;
padding:5px;
}
#moh div
{
/* width:500px; */
height:50px;
background:green;
}
<html>
<head>
</head>
<body>
<div id="moh">
<div></div>
</div>
</html>
The padding on the right hand side doesn't appear because, the total width of the parent div is 100px(width) + 10px(padding) while the width for the chid div is explicitly set to 500px.
Since the chid div is a block level element and width property greater than that of the parent, it will move past the parent element and hide the right border from the parent div.
Solutions
either remove the width attribute in the child div (so it will take full width of the parent)
or set the width of the parent to at least 500px which is the width of the child element
The reason for this can tell. It's hard to explain, but I'll try. Your" moh " div width value is 100px," moh " in the div width value is 500px. The order of items on Pages is normally left to right. If you do not apply overflow, you see the overflowing sections :
#moh {
background: red;
width: 100px;
padding: 5px; // this padding should be on all 4 sides
}
#moh div {
width: 500px;
height: 50px;
background: green;
}
<div id="moh">
<div></div>
</div>
As you can see, there's an overflow from left to right. when you give overflow, The Overflow will be hidden automatically. So where's the overflow ? (left ? right ? ) That's why it will try to hide everything from the overflow, that is, the part that goes out when it doesn't fit. The part he's trying to hide is in the padding, so that part doesn't show up.
I'm sorry if I said anything that would be misunderstood. Maybe I helped you understand a little bit.
It happens because #moh is 100px and the inner div is 500px. The solution is to set them both to 500px and wrap them with a 3rd div that is limited to 100px with overflow-x.
#wrapper {
overflow-x: auto;
width: 100px;
}
#moh {
background: red;
width: 500px;
padding: 5px; // this padding should be on all 4 sides
}
#moh div {
width: 500px;
height: 50px;
background: green;
}
<div id="wrapper">
<div id="moh">
<div></div>
</div>
</div>
#wrap
{
overflow-x:auto;
width:100px;
}
#inner
{
background:red;
padding: 15px;
width: 500px;
}
#inner div
{
width:500px;
height:100px;
background:green;
}
<div id="wrap">
<div id="inner">
<div></div>
</div>
</div>
one solution would be this:
I had to add some more HTML but hope it solves your problem
It's because of the html behavior of block element like DIV and css overflow property.
By default html elements flow from left to right.
Browsers by Default behavior is -
If parent DIV have any width property (or specific width
inherited) and no css overflow rule is defined, and if child DIV
have defined width which is more than the parent can accommodate,
then it will overflow and will grow beyond the right edge of parent.
To control how Parent Div will deal with overflowing, css overflow
property can be used. overflow:hidden will instruct browser to crop
the exceeding width div at the edge.
overflow-x:auto will instruct browser that, when child element
exceeded width beyond the edge then add scrollbar at x-axis.
So, in the example case above, the child div is having greater width than parent and it is exceeding of the parent. And parent div is having 'overflow-x:auto' rule defined, the scrollbar is appearing upto the edge of parent.
Since padding is inside the edge of the div, it does not considered.
If you want to have padding on all side of the parent div.
Treat the parent div as a grandparent by adding one more div inside a parent and moving child div in it.
On grandparent div you can add required padding and width.
3 On new parent set width:100% which will expand to fit in a grandparent and setting overflow-x:autorule will add scrollbar when the child div expand beyond the parent width.
So, the code will be something like -
#moh
{
background:red;
width:100px;
padding:5px; // this padding should be on all 4 sides
}
#moh div
{
width:500px;
height:50px;
background:green;
}
div{
box-sizing:border-box;
}
#moh div.moh-container{
width:100%;
overflow-x:auto;
}
<!-- Grand parent Div for padding and width -->
<div id="moh">
<!-- Parent Div width 100% to fit in grandparent and overflow rule -->
<div class='moh-container'>
<!-- child element with exceeding width -->
<div></div>
</div>
</div>
Fiddle -
https://jsfiddle.net/guruling/471ka569/13/
i use this code
<div class="main">
<div class="babyOne">
</div>
<div class="babyTwo">
</div>
</div>
.main{
width:100%;
position:relative;
}
.babyOne,.badyTwo{
width:50%;
float:left;
}
with this CSS above everything works fine.
but as soon as i give padding to inner divs all the ui breaks,
.babyOne,.badyTwo{
width:50%;
float:left;
padding:5px;
}
and fire bug shows the increase in the width of divs equal to padding.
According to padding property this should not happen.
any idea how to prevent this?
First of all you need to learn CSS box-model
This states that whatever padding, border, margin you add to you element does count outside it, so for example the element is of 200px width and 100px height, if you add padding say 5px than the width and height will be 205px and 105px respectively, so inorder to workaround with this you need to use CSS3 box-sizing property, but as still it is CSS3 property and if IE is the main thing you want to supprt, I suggest you to resize the elements according to your needs
So for example a div with these styles
div {
height: 100px;
width: 200px;
padding: 5px;
}
You can re-size the above as
div {
height: 95px;
width: 195px;
padding: 5px;
}
CSS3 box-sizing Reference
The WRAPPER must have fixed size: http://jsfiddle.net/esVgH/1 example:
.main{
width:200px;
position:relative;
}
Another solution is display the .baby as a table cell:
.babyOne, .badyTwo {
display: table-cell;
}
Your problem is the expected behaviour.You set a width and then you say give it some padding.So the width plus the padding is going to be greater than the original width.
You can try CSS3s box-sizing attribute: http://www.quirksmode.org/css/box.html
I'm not sure how widely supported it is though.
There's also a host of SO answers here: How apply padding in HTML without increasing the div size?
.babyOne,.badyTwo{
width:45%; /* As you have like based on padding */
float:left;
padding:5px;
}
I have two <div> elements, one next to the other. Both have the CSS attribute display: inline-block;. Now the second <div> element has a fixed width of 100 px, whereas the first <div> element doesn't have a fixed width: it depends on the size of the window.
My problem is that the first <div> element will spread over 100% vertically if the window is narrow. I would like to restrict its width to 100% minus 100px, so that both <div> elements can align one next to the other at all times.
I've looked at posts with similar questions, but none really dealt with the case of inline-block.
EDIT: Here is a jsfiddle: http://jsfiddle.net/y3sXu/ I want the first <div> to provide some room for the second <div> on the same line.
There's no particular reason to use display: inline-block to do this.
Here's a clean implementation using floats instead: http://jsfiddle.net/y3sXu/14/
<div id="container">
<div id="DivB">b</div>
<div id="DivA">a</div>
</div>
#container {
overflow: hidden;
}
#DivA {
overflow: hidden;
}
#DivB {
float: right;
width: 100px;
}
This is an old question but has some weight in Google so I thought I'd update it with a new answer. A more modern way to accomplish this is to stick with display:inline-block; and use calc for the width of the variable element.
So long as you have one fixed width inline element width: 150px, you can offset the variable width element by the fixed width calc(100% - 150px).
Your code should look like this:
.fixed-width-element {
display: inline-block;
width: 150px;
}
.variable-width-element {
display: inline-block;
width: calc(100% - 150px);
}
I think I understand what you are asking for. http://jsfiddle.net/y3sXu/6/
I have gone for a traditional two column layout, as it seems like the best way to solve your problem.
float has been used to ensure that the right hand div always sits on the right, and margin-left to keep the left div away. overflow:hidden is used a cheap and cheerful clearfix.
best way I can figure doing it is with absolute positioning:
div#TextB{
position:absolute;
right:10px;
top:10px;
}
div#master{
margin-right:120px;
}
http://jsfiddle.net/Vnxr7/1
There is one very ugly solution:
Set the overflow of the outer div to hidden, take the div out of the dom using position:relative, setting the left to -100px and the width to 100%.
You have to play around with the display, position and left/top etc. or get back with some more details so one could know what you want to achieve.
what about this ?
div {
background:green;
margin-right:100px;
}
#TextB{
width:100px;
background:red;
float:right;
margin:0px;
}
Updated version
Just give the outer div a padding of 50px on both left and right side
EDIT
Place this where u want to put the gap:
<div width="100px" height="1em"> <div>
This is what I am trying to do :
HTML
<div class="container">
<div id="one" class="child">One</div>
<div id="two" class="child">Two</div>
<div id="three" class="child">Three</div>
<div id="four" class="child">Four</div>
</div>
CSS
<style type="text/css">
.container{
height:40px;
width:500px;
}
.class{
float:left;
/*...*/
}
</style>
The child divs should fill the container div how big or small it has its width. They can get big according to the container automatically.
|<---One----><---Two---><-Three-><--Four-->|
How can I do it with css?
Thanks in advance.
I've set up a test site to make sure this works:
First, you'll need to keep float to "left" to keep everything on the same row. Next, set width to "25%", to space out the elements. Finally, set text-align to "center" to center the elements, as in your diagram. Remember, if you change the number of elements, you'll need to modify the "25%" to a value that evenly spaces out the elements. (Use 100 / numElements).
.child {
float: left;
width: 25%;
text-align: center;
}
Does anyone know a way to do this without using width percentages, so that it will auto-spread the elements if they are removed or added?
You can set the .child width to 25%, like this:
.child { width 25%; }
You can test it out/play with it here.
Total width is 500 so each child div should be 125px wide. You got the right idea using the float:left;
The solutions that have been given to you are correct. Just be careful if you have margins/borders/paddings in the inner divs, because in that case the 25% would break the layout (margin, borders and paddings are not included in the percentage).
<style>
.header {
float:left;
width:50%;
border:1px solid black;
}
</style>
<div style="width:100%;">
<div class="header">Hello</div>
<div class="header">World</div>
</div>
I want the two inner divs to appear beside each other fitting perfectly inside the parent. This happens when there is no border set on them, but when I do set a border, the second div wraps and appears below. How do I avoid that?
The reason this happens is because 50% x 2 is already 100%. The 2 px borders make the width 100% + 4 px. To undo this, use negative margins of 1px on either sides.
Demo: http://jsfiddle.net/rfSMX/1/
You may run into the 100% combined width issue in IE.
Essentially, what is happening is that your div's are sized 50% + 2 pixels (one for each border) wide. Because (50% + 2 pixels) * 2 is wider than your 100% container, it forces the floats to wrap.
Applying a -1 pixel margin to the left and right sides of your .header div's should do the trick.
Add an extra div inside the divs that need a border called header-inner.
<style>
.header {
float:left;
width:50%;
}
.header-inner {
padding: 10px;
border: 1px solid #ccc;
}
</style>
<div style="width:100%;">
<div class="header"><div class="header-inner">
Hello
</div></div>
<div class="header"><div class="header-inner">
World
</div></div>
</div>
This could work:
because you don't need to float the second div it should fill up any space that is left after the first div. This allows you to add a border and still have them flush side-by-side