I've stumbled across an issue that I'm not entirely sure how to resolve.
I have a page with a number of divs, one of which contains a table but has a margin of 20px. I need this table to 'butt' against the right-hand side of another div, which I have accomplished by using a margin of -20px - works as I'd hoped. As this div (which covers the entire right-hand side of the page) is fluid, the table has a width of 100%.
Whilst the left-hand side of the table is where I want it, the right-hand side is now 20px short of everything else.
Is there a way I can keep the negative margin on the right, without it also moving the table 20px from the right? I've tried a few things without success. My table CSS is pasted below.
.pricetable {
width:100%;
margin-left: -20px;
padding: 5px;
}
My solution was to wrap the table inside a div with the negative margin.
<div style="margin-right:-20px">
<table style="width:100%">
...
</table>
</div>
You can also set the width to less than 100% and set margin auto:
.pricetable {
width:90%;
margin: auto;
}
Hope it helps.
it is now possible with CSS calc:
.pricetable {
width: calc(100% - 20px);
margin-left: -20px;
padding: 5px;
}
You could absolutely position your table, so that it's aligned at the right.
position: absolute;
right: 0;
There's no way to add a left margin without moving the table, because the table offset is calculated in this way: margin + padding + width = offset width.
When you set the width to be 100%, the margin and padding cause the element to expand.
Padding (left) X, (right) y + width = over 100%
over 100% + negative width (X+y) = 100%.
The first definition adds some padding at each side of the table. The second definition shifts the table to the left, because it's a negative margin.
try giving table-layout:fixed and see
Related
:)
when i dont set top/left properties for an element fixed what acccured??
please see this sample code:
#fixed-menu{
background-color:#ba4444;
border-top: 5px solid #0892cd;
height: 60px;
position: fixed;
width: 100%;
z-index:9999;
box-shadow:rgb(128, 128, 128) 0px 5px 15px 0px;
}
#wrapper{
height:900px;
width:960px;
margin:0 auto;
background-color:yellow;
margin-top:100px;
}
<body>
<div id="fixed-menu"></div>
<div id="wrapper"></div>
<body>
with above code,fixed-menu also have 100px margin-top!!!!why?????
...................
how calculated top property???
Once an element has been fixed with position: fixed, the three properties left, width and right together determine the horizontal position and size, relative to the window. (CSS uses the more general word viewport; a window is an example of a viewport.)
You need at most two of the three properties, i.e., left & width, right & width, or left & right. Setting just one of the three, or none at all is also possible. In that case, CSS will use the element's natural (“intrinsic”) size and/or position, as needed, for any properties that are left at their default value ('auto').
The same holds for the trio top, height and bottom. You need to set at most two of them: top if you want to control the distance from the top of the window, bottom to control the distance from the bottom, and height if you want to specify a fixed height.
I hope that answers your question. For further reading you can refer to this link
Tip : Fixed position is free flow guy in the document window. Based on the element present before the fixed element aligns itself next to it.
In your example there's no elem before fixed div but the following wrapper div you are setting the margin top to 100px. which affects the viewport. So you can imagine the viewport for fixed element starts below the 100px mark set by the wrapper div.
you can see removing the margin in wrapper div or set the wrapper position to fixed with margin top 100px. you will get the idea.
I would like to position 5 column blocks,each containing text in a row.I have tried to create a wrapper class which has a width of 1600px,a padding of 30px to the left and the right and two classes that will align content to the left and the right respectively,each of these classes are in nested divs within the wrapper class.I gave each div a width of 300px and a height of 300px,the first four divs align next to each other while the last one goes below and to the right.The CSS and HTML is here.
EDIT:
The major issue got fixed when:
.wrapper
{
width:1600px;
height:auto;
padding:0px 30px 0px 30px;
}
But this seems to exceed the screen resolution needing me to scroll horizontally to view all the content,how do I deal with different screen resolutions?
try to give width:1600px;
.wrapper
{
width:1600px;
height:auto;
padding:0px 30px 0px 30px;
}
http://jsfiddle.net/sKsZN/
Try using float:left and display:inline-block for all the column <div>. Also make sure that the total width of those column don't exceed to .wrapper's width.
You should use float:left for your .content-right class. http://jsfiddle.net/sDyC5/2/
Wrapper element css width property has set to wrong value. You must set the properly unit (px|%|em|ex). And also display: inline-block and float propeties should not use together.
how do I have two divs with 50% width side by side and a margin without the second div dropping underneath the first?
Div id style is as follows:
#div3{width:50%; float:left; margin: 2px; background-color:yellow;}
Thanks,
Dan
50% + 50% + margins > 100%
Therefore, the elements wrap. You will need to adjust the width or the margins to stay within the 100% limit.
#div3{width:48%; float:left; margin: 1%; background-color:yellow;}
hows that?
You need to change the width of divs to less than 50% because together they have 50% + 50% + 4x margin 2px. Try to change it to an exact value in pixels or f.e. 49%.
The margin will give extra width to the div elements.
You could try setting the divs to 49% each and giving each div a margin auto.
This will centralise the divs and still give you a small amount of margin dependant on the browsers size.
I always cheated and set them both at 49% width, and then added padding (not a margin). But you want some visual colorblocking, right? If you want one to have a background and one to be no background (relative to the rest of the page) set the yellow one at 50%, and the no-color background one at 49%.
You could look into using the new box-sizing property which subtracts the padding from the width instead of adding it on top like you are experiencing:
div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Most browsers don't support the entire spec yet but it can accomplish what you want: http://caniuse.com/#search=box-sizing.
Though I believe that you would have to use padding instead of margin to create the spacing.
It seems that when I have a table inside a div and I set the table to 100% width and give it some margin, it seems to disregard the rightside margin. Here is the fiddle for it:
http://jsfiddle.net/gFQGb/
The width applies to the actual content of the element, so you have a table with 100% wide content, and on top of that you add some margins pushing the width over 100%, thus the right side of the table extends beyond the parent's right edge. Probably you should go with padding on the parent instead of margin on the table, or an additional wrapper <div> with just the margin.
just add padding: 10px; to the .inner class and remove margin from the table.
Here is the demo
That's how the CSS default box model works: width of the element (defined via width: x) + borders + margins + padding = total amount of space it takes up.
http://css-tricks.com/the-css-box-model/
You can change the box-model by using box-sizing: border-box, which will cause the width: 100% to include your paddings/borders.
http://css-tricks.com/box-sizing/
It is possible to use position:absolute and left and right on the middle column to set where it ends in relation to the parent div.
However I'd like to be able to have the left side of the center div to start right where the left column ends, and for the left column to be adjustable (based on its content).
This seems like a really basic thing but from what I understand there is no way to do this without flexboxes. Is this true? Is there nothing I could do with clever nesting of semantically superfluous elements and certain styles set to auto?
If the right div has some set width (either in % or px), then yes, you can let the left div's width be defined by its content while letting the center div fill in the remaining space:
#right {
position: absolute; /* position in top right corner */
top: 0;
right: 0;
width: 80px;
}
#center {
margin-right: 80px; /* same as #right width */
}
#left {
float: left;
}
jsFiddle DEMO
From what I can tell you'd be better off with simple floated blocks. If you wanted to absolute position all of them together, you could wrap them in an absolute container, and float them inside. Maybe I just don't understand why you need them absolutely positioned, but this seems like a viable option.