I have this div with class "circle-text" which contains a "p" element containing a small text.
The p element has top and bottom margins.
Now this margins seems to be moved above the upper div instead of being between the div and the p, which I dont want.
CSS:
.circle-text {
/*float: right;*/ /* Uncomment it*/
width:20%;
border-radius: 50%;
background-color: green;
}
.circle-text p {
width:100%;
padding-top:50%;
padding-bottom:50%;
line-height:1em;
margin:2em 0;
text-align:center;
}
Here's the example: http://jsfiddle.net/bendtherules/3eebw/6/
Now if I add float: right; to the upper div, it actually includes the margin now (which is exactly what I want).
How does that work? Also how can I mitigate this issue?
DEMO: http://jsbin.com/uBANucu/1/
Another option which may be more flexible: http://codeitdown.com/css-circles/
The p will always affect the height and so the result is an oval, not really a circle. There's a number of ways to do this, here's one:
<div class="circle-container">
<div class="circle-text">
<p>I am circle</p>
</div>
</div>
CSS
.circle-container {width:20%;}
.circle-text {
border-radius: 50%;
background-color: green;
padding-top:50%;
padding-bottom:50%;
position:relative;
}
.circle-text p {
position:absolute;
top:50%;
width:100%;
line-height:0;
margin:0;
padding:0;
text-align:center;
color:#fff;
font-size:15px;
}
If I understand your question right, the reason this is happening is because you have added both padding and margin. Margin goes outside of the padding. If you press Ctrl + Shift + C while in Chrome, hover over the p and select it so that you can inspect element. You will notice that the margin of the p is outside of the padding that is already there.
Once you have the developer tools opened, go to the right panel and scroll down until you get to the section where you can see how many pixels or margin and padding there is. It is an interactive picture that you can't miss.
If setting line-height: 0 is suitable for your design, change that and remove the margin altogether.
Example: http://jsfiddle.net/3eebw/12/
An understanding of the CSS box model may help you. See this diagram: http://www.w3.org/TR/CSS21/box.html
From what I can see what you mean is that you want to increase the space between the top and bottom edges of the circle from the p tag. The padding is the right way to go and not the margin.
Related
I am trying to prevent two side by side divs I have from overlapping in responsive layout.
Here is my html:
<div class="image"><img src="images/misc/libertyXSmall.jpg"/></div>
<div class="storyWrapper">
<div class="headline">THIS IS A TEST HEADLINE TO SEE HOW EVERYTHING
WORKS ON THIS NEWS LIST PAGE!</div>
</div>
Here is the CSS:
body{margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px;}
.mainContainer{float:left; height:auto; width:100%; max-width:800px; }
.image{float:left; margin-top:0px; width:14.25%; height:auto;}
.storyWrapper{float:left; width:85.75%; height:auto; min-height:64px; background-color:#f6f6f6; color:#000000;transition:0.2s; }
.storyWrapper:hover{background-color:#c0c0c0; color:#ffffff;}
.headline{text-align:left; padding:6px 6px 6px 6px; font-size:11pt; font-weight:bold; font-family:Arial; text-decoration:none;}
The link to this page is: http://www.rebelplanetnews.com/newsMenu3.html
As you can see, my issue is.. the text div to the right overlaps the image div to the left on page resize (smaller). I need to prevent that.
The answer is not to use a percentage for your headline. The simplest solution is to use the calc value, which can be used in all modern browsers.
The following will work:
div.storyWrapper {
width: calc(100% - 114px);
float: right;
}
Here, I have noted that the width of the image is 114px, and set the width of the container to 100% minus that.
I have also floated the container to the right.
Note that calc is a little bit fussy. In particular, you need spaces around the - operator: calc(100%-114px) will not work, at least not in all browsers.
The problem is that your actual image isn't shrinking when the .image div is. So .image div will adjust according to its width percentage, but not the image contained within it. If you add a width: 100% to the img element, the image will now shrink along with the div container, and the text div won't overlap.
I have two floated div in a wrapper. They are left and right. I wanted to make the right div to appear at the top of first div(left). Right should come first and left should come at second.
Here is the code
<div id="wrapper">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
CSS
#left{
float:right;
}
#right{
float:left;
width:100%;
}
#wrapper{
width:100px;
background-color: #000fff;
}
I'm looking to have the same 100% as width for right div. Is this possible without changing markup and doing changes in CSS alone?
JSFIDDLE
EDITED
I want the right div to be in top and left should in bottom after that. When i use position absolute for the right div then left div is hidden. JSFIDDLE.
Should look like this
Use the following css :
#left{
float:right;
border: 1px solid black;
}
#right{
float:left;
position: absolute;
top: 0px;
}
#wrapper{
width:100px;
background-color: #000fff;
}
If you want place the right div before left, just remove the float:left property from #right.
Fiddle
If you want the right DIV above the left, you need to use absolute position
First of all clear the float, then set position:relative to the parent "wrapper" and position:absolute; to the right div.
Check out this fiddle
If you want to do this with just css you have to use absolute positioning. But only if you know height of each element and exact number of elements like this. Check this fiddle.
Let's assume each element has 20px height, then you can place one at top: 0px and second at top:20px. And to use remaning space like usual relative way, you must add padding equals to total height of your elements that has absolute positioning to wrapper.
Alternatively you can use JavaScript to change order in html.
I'm not too convinced by the answers so far. I would recommend avoiding 'absolute' and even javascript. Also if you want to make it friendly to all browsers you should really be specifying things such as height. It's a common misconception that a design can't be worked on every modern browser without huge hacks (i was doing it years ago for IE5.5 and firefox etc), its usually due to the CSS not being properly formed and valid. Now try the following:
#left, #right {position:relative; float:left; height:30px; color:white; width:inherit; }
#left{
background-color:blue;
margin-top:30px;
}
#right{
background-color:green;
margin-left:-100%;
margin-top:0;
}
#wrapper{
width:100px;
background-color: #000fff;
}
I know it's a super-basic question, but I'm not able to find a solution. I have 2 div and I would like to display them as blocks (one below the other) without having 100% width. Here's my code.
HTML
<div id="container">
<div class="test">one</div>
<div class="test">two</div>
</div>
CSS
.test {
display:inline-block;
clear: both;
border:1px solid;
}
#container {
clear:both;
text-align:center;
}
Unfortunately this answer doesn't fit to me, since I need to center blocks horizontally (so float cannot be applied in my case). Here's the fiddle. Thanks in advance.
to center them on top of each other without taking 100% width and still use margin:auto; use : display:table;
.test {
display:table;
margin:auto;
border:solid;/* to see it */
}
You can specify the width of the divs, change display to block, and use margin: 0 auto to center them.
JSFiddle
You can also center the div by adding 50% left offset, and then negative margin in amount to half width of the div. I do not know how much is this applicable to your case, but here is an example:
.test {
position: relative;
border:1px solid;
width: 300px;
left: 50%;
margin-left: -150px;
}
You can see it in action here: http://jsfiddle.net/b8LuQ/7/
display:inline-block; is not allow the second line. Therefore I removed it and define width for both div test one two you can resize it and margin:auto is align center the both div in container here is an example
Why can't the #navbar be shifted further upwards ? I tried margin-top but it didn't work. Only an extremely large value had some effect, but the positioning is too skewed.
The #container contains all 3 elements.
#container {
position:relative;
margin: 0 auto;
width:790px;
}
#chicklogo {
float:left;
border:1px solid black;
}
#rightext {
float:left;
border:1px solid black;
}
#navbar {
clear:both;
border:1px solid blue;
}
It can't because #navbar has clear:both and is going to fall under the tallest of the floated elements. From your image, you can see that #rightext is taller and #navbar sits flush under it.
If you gave the logo and right text the same height then your nav would sit just under both.
I have created a JS Fiddle to demonstrate a negative margin-top which would mean the navbar would overlap the preceding element, even though it is set to clear: both.
Ideally, you would reduce the height of the #righttext element as it looks like the white-space in that element is causing your layout issue, but the negative margin-top can also work if that isn't possible.
The following html and css shows two divs inside a container. The left div isn't floated; the right div is floated right.
The right div seems to be one pixel too narrow, and the red background color of the container is therefore showing through in that one pixel gap.
This is a simplification of my problem. http://jsfiddle.net/XPd9J/
HTML
<div class="inner-wrapper">
<div class="right-sidebar">
</div>
<div class="content">
<br /><br />
</div>
</div>
CSS
.inner-wrapper {
position:relative;
background-color:red;
overflow:auto;
width:90%;
padding:0;
margin:20px 0 0 20px;
}
.right-sidebar {
position:relative;
width:40% !important;
background-color:lime;
float:right;
margin:0;
padding:0;
}
.content {
position :relative;
width:60%;
background-color:silver;
margin:0;
padding:0;
}
It's not the float that makes the problem. It's the percentage width. In FF and IE it works perfect, but Chrome calculates percentage width so, that not always the pixels sum up to the full 100%. Just try to slighty change the window width and you will notice the extra 1 px to disappear/appear sometimes.
How to avoid this behavior? You need to have use the same percentage somehow, so it is calculated just exactely the same. The right sidebar is 40% wide, so you need to have a right margin of 40% for the content div (these 40% are 40% of the containing block element)
http://jsfiddle.net/XPd9J/1/
.inner-wrapper {
background-color:red;
overflow:auto;
width:90%;
padding:0;
margin:20px 0 0 20px;
}
.right-sidebar {
width:40% !important;
background-color:lime;
float:right;
margin:0;
padding:0;
}
.content {
background-color:silver;
margin:0 40% 0 0;
padding:0;
}
Another easy option to get the full 100% is to set the parent element to overflow:hidden and your element to width:101%.
I also encountered that issue and I use two option the display:inline-table and display:table-cell in the parent div of the floated elements..although it is not a table, I use that as an alternative
For anyone coming to this in the future, it's possible to create left sidebar / content / right sidebar with liquid floats using the above method. It might be done like this:
Container div
right-sidebar width:30%;float:right;margin:0;padding:0;
content width:40%;float:right;margin:0;padding:0;
left-sidebar margin-right:70%;margin:0;padding:0;
End container div
Provided all the containers have margin:0;padding:0; then this works in FF, IE, Chrome, Safari and Opera (latest) without a problem. Genius. The dodgy browsers should have had this problem solved a long time ago - one can only guess that web designers don't often need pixel perfect placement of sidebars otherwise there would have been huge pressure on the browser builders.
You got two non-breaking spaces there. character causes the 1px extra space on the left of the right sidebar. Btw, position: relative is redundant in this context (it's only useful when you have to fix something in IE6).
Set "inner-wrapper" to overflow hidden (just in case). Then on the right div use calc(40% + 1px) to fix the issue.