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.
Related
I have a problem with bootstrap css.
In the fiddle just type something to the input then input jumps up some pixels... WHY?
<div class="test"><input type="text" value="ABC"></div>
.test { height:86px; overflow:hidden; border:solid #000 3px; }
.test input { height:74px; margin:8px 0 0 6px; font-size:74px; }
So I want to use margin-top or somthing else to positioning lower the input inside the outter div
screenshot
<div class="test"><input type="text" value="ABC"></div>
.test { height:86px; overflow:hidden; border:solid #000 3px; }
.test input { height:74px; margin-top:20px; font-size:74px; }
New fiddle
It's not clear but it render better with this :
Css :
.test { height:86px; overflow:hidden; border:solid #000 3px; }
.test input { height:86px; margin:0; font-size:74px; padding-bottom: 10px;}
Fiddle : https://jsfiddle.net/ja8mymtr/1/
That is a bit weird but you can fix it by using absolute position like this
.test {
height:86px;
overflow:hidden;
border:solid #000 3px;
position: relative
}
.test input {
height:74px;
margin:8px 0 0 6px;
font-size:74px;
position: absolute;
bottom:0
}
<div class="test">
<input type="text" value="ABC">
</div>
... input jumps up some pixels... WHY?
After a lot of messing around I have finally zeroed in on the issue, phew.
You have set the overflow property of the container div to hidden. But, the inner content of that div, has more height than the parent (counting the margin in, and the font size of the input).
Due to which when a user types something in the input element, the browser tries to center the element by scrolling to it, its just that we aren't able to see it.
And hence we see the "jump".
DEMO with the scroll bar shown, for further demonstration of what is happening.
So I want to use margin-top to positioning lower the
input inside the outer div, while avoiding the jump
You can reduce the font-size and line-height to something which can make the input element fit snugly in the container while retaining the margins. Something like this.
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
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.
I have more than 100 divs on the page and each row has 3 divs. I want to remove left margin from first div and right margin from right div whereas center div should have 15px margin from left and right. Please guide me how can I do that without giving specific classes (no margin) on each div. Here is the example
here is my css code
.prp_box{
margin:15px 15px;
width:100px;
height:100px;
background:#5f03a6;
}
Check this out : http://jsfiddle.net/VHXEp/
Use nth-child(n) CSS3 selector.
You could try using the nth-child css selector.
#container:nth-child(3n+0)
{
margin-left: 0;
}
#container:nth-child(3n+3)
{
margin-right: 0;
}
This code might need a few adjustments, the 3n is how often, so every 3. The number after the + is where to start
Check the JsFiddle
http://jsfiddle.net/kpTdE/
.prp_box{
width:100px;
height:100px;
background:#5f03a6;
float:left;
}
.sec_box
{
width:100px;
height:100px;
background:#5f03a6;
float:left;
margin-left:30px;
}
.sec3_box
{
width:100px;
height:100px;
background:#5f03a6;
margin-left:260px;
}
I'm among the coutless people who are facing the same problem about adapting parent's height to the contained elements. I did some research and found similar questions, but no answer could help me, so i thought i should open a new one.
I already tried the suggestions given as answers here, and here, like adding "clearfix" as a class for the container div (in this case, the clearfix class is there in the Fiddle i created), adding a workaround-spacer, and so on. I don't have any floated element, thought, so maybe it's a different kind of problem.
The problem still remains, in both the nested divs i have in my code (#content_wrapper doesn't adapt to #div_1 and/or div_2, while #div_2 doesn't increase its height to the contained <ul>.
I really hope to find a solution (maybe it's just something wrong in my code i can't de-bug).
Thanks for your attention.
Generally speaking, you want to avoid using absolute positioning for layout purposes.
What you're looking for is equal height columns. The whole point of equal height columns is that you don't need to know the height of any of the columns involved, they'll all be the same height and expand gracefully no matter what their contents are. The simplest way to achieve this is by using the table* display properties.
http://jsfiddle.net/UfWJh/3/
body {
font-size:10px;
}
/* wrappers */
#header_wrapper {
width:95%;
height:40px;
margin:auto;
margin-top:5px;
padding:2px;
border:1px solid red;
}
#content_wrapper {
display: table;
width:95%;
margin:auto;
margin-top:5px;
padding:2px;
border:1px solid red;
}
/* div1 */
#div_1 {
display: table-cell;
width:70%;
border:1px solid purple;
}
/* div 2 */
#div_2 {
display: table-cell;
width:25%;
border:1px solid purple;
}
#div_2 ul {
list-style-type:none;
}
#div_2 li {
width:100px;
height:30px;
margin:2px;
padding:1px;
border:1px solid darkgrey;
}
If you want a parent element to adapt to it's children you cannot explicitly define the value of the axes (width or height) that you want to adapt. Use width:auto or height:auto then use min-width,min-height,max-width & max-height to set minimum and maximum values for the adapting axis.
You then set values for the children, which can either be explicit values or again min and max thresholds.
From your rather messy code, it was easy to see, you have done much of it right, but you must not understand the position options. Try to gain a better understanding of relative,absolute & fixed positioning.
I've fixed it by changing the absolute positioning to relative and fixing a missing css selector for the styles you were trying to use on the <li>'s:
/* div1 */
#div_1 {
position:relative;
width:70%;
top:5px;
left:5px;
border:1px solid purple;
}
/* div 2 */
#div_2 {
position:relative;
width:25%;
top:5px;
right:5px;
border:1px solid purple;
}
#div_2 ul {
position:relative;
top:0px;
left:0px;
list-style-type:none;
}
#div_2 ul li {
width:100px;
height:30px;
margin:2px;
padding:1px;
border:1px solid darkgrey;
}
I suspect you probably don't need all those fixes you tried. Also, I find code so much more readable in this format.
Here's is my answer:
Remove position absolute (it's not a good idea to implement your layout like this...not cross-browser friendly...)
Make its content display: table
and then display: table-cell on the 2 divs to have even height...
Here is the example:
http://jsfiddle.net/Riskbreaker/UfWJh/4/
If you do not want it this way or care about equal height then use overflow:hidden on the content wrapper and float: left the 2 divs...
Here is the example:
http://jsfiddle.net/Riskbreaker/UfWJh/7/