On this page (http://www.comehike.com/hikes/hiking_group.php?hiking_group_id=2), I'm trying to get on the right side, to have the button for "join group" to
Have the same botder width as the div above it
Leave at least a little white space before the ad that comes right below it
I am trying to do something like this:
<div style="width: 285px; float: right; border: 1px solid; padding: 5px;">
But adding the padding just made the div wider, and didn't make any space to the bottom.
Any idea what I can do? Thanks!
Do margin-bottom instead of padding-bottom
Related
This question already has answers here:
CSS Margin Collapsing
(2 answers)
Closed 8 years ago.
I have this div container in a table cell:
<table style="width: 100%; background:transparent" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td>
<!-- This div is making troubles -->
<div style="margin: 0; border: 1px solid blue; background-color:#CAE2F0; align:right; font-size: 150%; font-weight: bold; text-align:center;margin-right:5px;padding: 0;">
<p>Themensuche</p>
</div>
</td>
...
...
</tr></tbody>
</table>
There is nothing special, no experiments, no floating, everything static.
As long as the div has a normal border, everything looks fine:
<div style="margin: 0; border: 1px solid blue; ...
Here is the problem. As soon as I set the border to 0, the border and much of the div's inner space is cut off:
<div style="margin: 0; border: 0; ...
I've checked with Chrome and Mozilla edge. What is causing the browser to cut off inner space? It goes against my complete understanding of the box model. How do you recommend I'd start debugging this?
Thanks for your attention.
The <p> tag has default margin of 24px from top and bottom.
When you add a border to the parent div, it cover that margin top and bottom.
When you remove the border of a div, it wont cover that default margin of <p> tag.
If you want to remained your height of the div as it is then just add overflow: hidden; to your div
Check this demo http://jsfiddle.net/amoljawale/e2rah/
Problemm is that p have default top and bottom margin's in our case it's 25px, parent's border cancel this top and bottom margin collapse. To correct your problem remove margin from your paragraph and add equivalent padding-top to parent's div and padding-bottomyou can see my solution here
A simple solution might be to just set the border color to the same value as the content's background.
JSFiddle
background-color:#CAE2F0;
Instead of using
, try to design div as a table.
For your reference http://snook.ca/archives/html_and_css/getting_your_di .
Using div inside table may give unexpected response.
I have this code: http://jsfiddle.net/mVX93/48/
Is it possible to remove the border from the far left side and far right hand side of the table?
I want to align it to either side of the page, and you can see it doesn't align with the test text. My idea would be to use nth item to apply border-left: 0px; to the first item and border-right: 0px to the last item however this doesn't seem to work.
Can anyone show me if this is possible and how it should be implemented please?
Since you have border-spacing:10px; there will be space remaining on the right and left side to separate the td. However, you could put a div around the table and change it's margin-left and margin-right.
Try this:
body {
background-color: gray;
overflow: hidden;
}
.grid {
margin-left: -20px;
margin-right: -20px;
}
You cell 4's text is overflowing but it is because you have a lot of . or dots without a space so when you enter text it should be fine.
DEMO
If you change the border-spacing to border-spacing-left:0px it aligns with Test but reduces the space between the cells. If you also add another Test and float it right it aligns with the right side of the table.
I'm trying to float a div (next > previous < links) (#nextprev) to the right of an already right-floated div (#rightcontent). At the moment the #nextprev div is pushing the #rightcontent div into the centre of the page - see here...
http://alexch.net/kblondel/project-01a.html
... but ideally I'd like to keep the #rightcontent div positioned as it was previously...
http://alexch.net/kblondel/project-01.html
There's a right margin on #rightcontent which I guess is making this div get pushed to the left. I really want the #nextprev to ignore this margin in this instance and sit next to #rightcontent.
Can anyone help me with this?
Many thanks
As #helion3 mentions in the comment above, removing the right margin on #contentright is the right idea. To match the old one margin-right: 30px will get the job done.
That is because of the extra div that is added:
<div id="nextprev">next ><br>< prev</div>
Update CSS of #contentright and take out margin-right
#contentright {
float: right;
overflow: hidden;
padding: 40px 0 0;
width: 420px;
}
I'm trying to make a border for the top of a div element. The border is a 1px thick solid line, and it is to make a noticeable division between the footer and the website content. However, I don't want the border to span the whole width of the footer. I'd instead like it to be shorter (by maybe 10 pixels or so on each side) and centered. How should I do this? Does it require me to use an image?
You mean something like this: http://jsfiddle.net/8ZSSc/
Or, if you always wanted exactly 10px short of each side regardless of page size:
http://jsfiddle.net/8ZSSc/2/
Just use the <hr /> tag to make a horizontal line, and set the width for that.
I guess you are looking for something like this:
<div style="width: 95%; border-top: 1px solid; margin: auto;"></div>
Add another div above the footer, add a top border, and use padding to make it narrower:
.footer-line {
border-top: ...
margin-right: 10px;
margin-left: 10px;
}
You could have another very skinny div, just above the footer.
I have a div which has style properties as "border-top, left, right, bottom" set.
But I do not want the border top to complete the box (which would be a rectangle). I want a small (About 2-3px) opening at the top right (on the length side of the box).
How can this be done?
I think there is a property in CSS called "border-top-width" but there is no "border-top-length".
Can it be done using CSS? Any other approaches are also welcome.
Thanks...
I don't think that's possible...The only way I can think of is to hack it with creating another element inside it (1px wide, 3px high), float it right, and then do margin-right: -1px...
<div style="border:1px solid black; background-color: white;">
<div id="borderHack"></div>
Your content here
</div>
And style the "hack" element like so:
#borderHack {
float: right;
margin-right: 1px;
background-color: white; /*This would have to be the same as the background*/
height: 3px;
width: 1px;
}
You will have to set border-top to none and then put another DIV into that container DIV. Then set the inner DIV's border-top and set it's width to be smaller than the container's.
I don't believe you can do this with CSS alone.
You could add an inner div that has the background color of the color you want at the opening. You would then position and size the inner element so that it appears to be a gap.
You can do that using what's explained in this link http://www.css3.info/preview/border-image/
Basically what you would do is draw a box without the top corners and assign it as border-image
Edit: But this is only available in CSS3 and not implemented by many browsers so for now the other answers give a practical solution.
You might as well try this (relative+absolute positioning) almost the same with float:
<div style="width:400px;height:300px;border-top:1px solid black; border-right:1px solid black;border-bottom:1px solid black;position:relative;">
some content here
<div style="width:2px;height:3px;position:absolute;right:0;background:gray;"></div>
</div>