I have a main div, and inside it..I have 3 divs
In normal view it works perfect i need the exact samething but for some reason if i resize my browser one div at the right side will float down i figure the reason for it but i don't know how to resolve it . floating down of div is due to the border i have give to the div but i have given the borders with perfect calculations but i don't know why still it happens
HTML
<div class="box">
<div class="box_top"></div>
<div class="box_left"></div>
<div class="box_right"></div>
</div>
CSS
.box{
width:500px;
height:300px;
}
.box_top{
width:500px;
height:49px;
border-bottom:rgb(239,239,239) 1px solid;
background-color:#636;
}
.box_left{
width: 249px;
height: 250px;
float:left;
background-color: #093;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFF;
}
.box_right{
width:250px;
height:250px;
float:left;
background-color:#006;
}
please go hear for the issue : http://jsfiddle.net/gtczu/
Add min-width: 500px; to .box, when the browser window gets smaller than 500px, the horizontal scrollbar will appear.
Check your updated Fiddle
It's because you are floating left without having a width set on the container. I would set a min-width or just a width on the containing div.
this is because the total width of all your inner divs get larger than the view port size when it is resized....thats why the last div is floating down when resized.try to express all width in percentage..i think this trick may work
Related
The gear button in the above picture is positioned absolute inside the textarea element, but the text is getting overlapped with it. I don't want to apply padding-right property.
I am new with HTML and CSS. How to stop text getting collapsed with gear button.
I have created a DEMO using another approach.
I have created a wrapper element with relative positioning, gave border to it and set its width to 300px. Then created a textarea element without any border and set its width to 280px in order to position your gear (positioned absolutely, float:right) at the top-right corner, so the text won't overlap you button.
HTML:
<div class='wrapper'>
<textarea class='textarea'></textarea>
<img src='https://cdn3.iconfinder.com/data/icons/unicons-vector-icons-pack/32/settings-128.png' class='img'>
</div>
CSS:
.wrapper{
width:300px;
height:auto;
border:1px solid red;
position:relative;
}
.textarea{
position:relative;
width:280px;
height:100px;
border:0px solid;
resize:none
}
.img{
float:right;
position:absolute;
width:20px;
height:20px;
}
You don't really can get away from padding as this is the right thing to do in your case.
(else please state why don't you want to use padding?)
Check this code out, maybe you'll find it more elegant to use the icon as a background-image.
You could play with the width, height, and padding-right values:
HTML part:
<textarea>hello hksjf askdjfj akldfla </textarea>
CSS Part:
textarea {
width: 100px;
height: 50px;
padding-right: 20px;
background-image: url('http://www.isilo.com/support/manual/iSiloIP/img/gearIcon.gif');
background-position: top right;
background-repeat: no-repeat;
}
Also in jsFiddle:
http://jsfiddle.net/nQkEG/
You can't.
Either use padding-right on the textarea or float the button to the right.
I have a div element, that I essentially want to turn into a window (of sorts). Basically, within that div element is content that extends beyond the view port of the "window" (div element). Here's a picture of what I'm trying to accomplish:
Now, I tried creating a div element of a fixed size, and gave it overflow: hidden, then placed the larger bit of content within that. The problem is (and I've only tested this in chrome so far), that when one of the inner elements no longer fits 100% within the overflow area, it disappears.
To know what I mean, I've attached another picture:
Notice that the turquoise portion to the right is missing (sorry about the white spacing to the left of the yellow, that's just a bad crop job on my part).
Is this a solvable problem without doing something hackish (such as extending the width of the "window" box, then absolute positioning another box in the right portion to hide that new area)?
Edit The question has been answered, but here's the fiddle for everyone to see what I was trying to accomplish: http://jsfiddle.net/MRnL6/1/
Thanks!
I think I understand what you're getting at. I think your elements are dropping down to the next line because their parent container isn't holding them. Try creating a container inside your window to contain the elements with a width equal to all of its children. See this fiddle for example.
The HTML:
<div id="window">
<div id="container">
<div class="elem one"></div>
<div class="elem two"></div>
<div class="elem three"></div>
<div class="elem four"></div>
</div>
</div>
and the CSS:
#window {
height: 100px;
overflow: hidden;
width: 250px;
}
#container {
width: 400px;
}
.elem {
height: 100px;
float: left;
width: 100px;
}
.one {
background: #0f0;
}
.two {
background: #f0f;
}
.three {
background: #ff0;
}
.four {
background: #0ff;
}
If I understand you want to be able to scroll to the content? Try overflow:scroll.
I think you are trying to accomplish something like this.
Please see:
http://jsfiddle.net/UMJwT/2/
try adding a intermediatary
div
The easiest option is to restyle the inner portions so that they all fit instead of overflowing.
See this demo
#container{
width:400px;
height:100px;
border:5px solid gray;
margin:10px;
}
.test{
display:inline-block;
width:25%;
height:100%;
}
JSFIDDLE
I have a wrapper with 4 divs inside it that are all floated to the left and are in one line. When I zoom out, the 4th div drops to the bottom. The only possible problem I can think of is the width of the wrapper decreasing, thus causing it to not be able to contain the 4th one, but the wrapper has a fixed width so I'm sure thats not the problem.
Here's the html:
<div id="wrapper">
<div id="panel">
<div id="panel1" class="panelcell"></div>
<div id="panel2" class="panelcell"></div>
<div id="panel3" class="panelcell"></div>
<div id="panel4" class="panelcell"></div>
<div class="spacer" style="clear: both;"></div>
</div>
</div>
and here's the css:
#wrapper{
width: 1280px;
}
#panel{
width:100%;
}
#panel .panelcell{
width: 318.75px;
height: 213px;
float: left;
border-right: 1px solid white;
}
.panelcell {
background-color: gray;
}
#panel1{
border-right: 1px solid white;
}
I think the root of the problem is how the browser renders your widths of "318.75px" as you zoom out (since, well, you can't render 0.75px to the screen). Depending on how it's rounded as the elements scale with your zooming out, the elements' widths could end up adding to larger than that of the parent element, resulting in the last floated element being pushed to a new line.
The way (that I could think of) to solve this is using percentage widths, rather than decimal pixel widths. Changing your definition of #panel .panelcell to this should give you what you're looking for:
#panel .panelcell{
width: 25%;
height: 213px;
float: left;
border-right: 1px solid white;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
The box-sizing: border-box ensures that the 1px border is also taken into account when determining the 25% width of the element. Here's an updated JSFiddle to show what this achieves. (The fourth element should not break to a new line as you zoom out.) If this isn't what you were looking for, let me know and I'll be happy to help further!
Did not test it, but I think your guess about the wrapper not being able to contain the <div>'s is correct: 4*(318,75px+2px) = 1283px > 1280 px.
Just increase the width of your wrapper and it should be fine.
It seems to be a problem with your border-right 1px solid which is increasing the width over 1280
I've got the following problem:
I want to have a relative container element that contains some child elements each with margin.
If i dont set the height of the container, it resizes height / width by its containing children.
Problem is that it seems to ignore the margin on them.
here some code:
css:
.container{
position:relative;
}
.child {
position:relative;
float:left;
width:200px;
height:50px;
margin-bottom:20px;
}
html:
<div class="container">
<div class="child">hello world</div>
</div>
The container should now resize height to 50+20 = 70px,
so if i put another element below it should be ok but it isn't.
Margin seems not to resize containers height, how to change this?
Not getting your question quiet well but you are probably missing to clear your floats...
Demo
.container{
position:relative;
border: 1px solid #f00;
overflow: hidden;
}
Alternatively you can also use clear: both;
Demo
Depending on the effect you are trying to achieve, either:
1) Add 'overflow:hidden' to the .container div
or
2) Use padding-bottom instead of margin-bottom on the .child div
<div id="container">
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
<div id="clear"></div>
</div>
#container{
width:200px;
margin-left:auto;
margin-right:auto;
margin-top:50px;
}
#top{
width:200px;
height:20px;
border:medium ridge #FFF;
}
#left{
float:left;
width:50px;
height:20px;
border:medium ridge #FFF;
}
#right{
float:right;
width:40px;
height:20px;
border:medium ridge #FFF;
}
#clear{
clear:both;
}
Why the #right and #top are not right aligned?
Its because the top element is actually overflowing the bounds of the container, while the floated element right is being restricted to it. The top element is overflowing the container because the border is not included in the width. So top is actually occupying 204px.
Problem Illustrated via Example: http://jsfiddle.net/KhJ6e/2/
To fix, adjust top to account for the 2px border on each side. (subtract 4 from width of container) or specify width as auto depending on your intentions.
#top{
width:196px;
height:20px;
border:medium ridge #FFF;
}
Example: http://jsfiddle.net/KhJ6e/1/
The top is wider than it's parent container
#top{
width:auto;
}
The problem is how the width is calculated for the box model. All elements on the screen have 4 components (inner to outer): content, padding, border, margin. By default, the width includes only the content. By adding the borders, top becomes larger than 200 pixels. Using the developer tools in chrome, it was rendering as 206px.
There are two possible solutions, one is fudge the widths, or two modify the box model. The first will work, but it is difficult to maintain. Any small change can mess up the alignment.
A better solution is to use box-sizing: border-box. By adding that CSS style, the width attribute will include content, padding, and border. So, originally padding and border wrap around the outside, but with border-box, the encroach on the inside.
Original: http://jsfiddle.net/deafcheese/Gv5BZ/
Corrected (using
boz-sizing: border-box): http://jsfiddle.net/deafcheese/Gv5BZ/1/
box-sizing reference: http://css-tricks.com/box-sizing/