Nested div tag widths - javascript

If I have a container div, with 3 divs within that div. And each of those 3 divs have a width of 33%. They fit perfectly inline.
If i add a 1 px border to the 3 divs it throws them off and are no longer in line and pushes the 3rd div under the other two.
How do i keep the 3 divs perfectly over the container, while still using a border to show the 3 divs specifically.
Here is the JS fiddle example, please see the divs with the "1" that I am having trouble with.
https://jsfiddle.net/p0yzrL0j/
Second question:
How can i keep the sizes fixed? so that any time the window is resized the divs shrink to match the window size rather than moving under each other.

I made an example with
box-sizing: borderbox;
https://jsfiddle.net/8c644nhv/1/
You can increase the border size and it will not add to the div width.

You can use
box-sizing: border-box;
That includes any border and padding that the boxes could have with the total width and height. W3C Reference
Grid systems usually have this applied using universal selectors.
*,after,before {
box-sizing: border-box;
}

Another way, if you don't want to use "box-sizing: border-box;"
Use calc().
Since your boxes have 1px border. That adds 1px to the left and 1px to the right. So you have to minus 2px from the 33% width.
#stats {
width: calc(33% - 2px);
}

I Just Used widths using calc for one div for subtraction of border widths from total with of divs now it can automatically adjusts for any resolution
.one{
width:33%;
height:100px;
border:1px solid red;
float:left;
}
.two{
width:-webkit-calc(34% - 7px);
width:-moz-calc(34% - 7px);
height:100px;
border:1px solid blue;
float:left;
}
I Just Used widths using calc for one div for subtraction of border widths from total with of divs now it can automatically adjusts for any resolution
<div class="one">1</div>
<div class="two">2</div>
<div class="one">3</div>

Related

How to increase div width according to the text inside it?

I have a div that users input text in it. But I want to increase it's width according to it's text, until a max of 50% of the screen. My CSS code:
.messages {
max-width:50%;
min-width:150px;
background: #ffeec0;
padding:2px;
margin:3px;
-webkit-border-radius: 2px;
border-radius: 2px;
border:1px solid #ffdd7c;
}
Result:
There's a lot of space after the "555" message, I want this size only if the user inputs some text like:
So, how can I increase the div's width dinamically, depending on the text size?
There are many ways to achieve this, but IMHO the cleanest is the following.
Your problem is that the boxes are "greedy" and will try to expand to the available width.
To prevent this, you can:
Make it "float: left;"
But also "clear: left;" to prevent additional "left floating" elements to use the available space on the right.
The CSS becomes:
.messages {
max-width:50%;
min-width:150px;
background: #ffeec0;
padding:2px;
margin:3px;
border-radius: 2px;
border:1px solid #ffdd7c;
float: left;
clear: left;
}
I provided full code and additional explanation (on mouseover) on the Liveweave here: http://liveweave.com/DFCZFj
Try changing display type of the div to table.
Example Here
.messages {
display: table;
max-width: 50%;
min-width: 150px;
/* other declarations omitted due to brevity */
}
Just add display:inline;. You can also remove the min width property, otherwise if the text is smaller, you will still have that gap.
Block elements (div's default display type) will attempt to take up the maximum horizontal space of the container. Imagine an implicit width:100% whenever you see them. inline-block will create block level elements in which the next element will attempt to render horizontally adjacent (provided there is enough room). This is what you want to use (display: table will work in this solution as well, but it has its own idiosyncrasies. I avoid them.
So your solution requires three parts:
First, you need to specify that the rows will be no larger than 50% of the available area. You will do this with an outer frame:
.frame {
max-width:50%;
}
Next, the messages themselves should each be given space entire row(s) at a time. So we'll use an undecorated div tag around each message.
Finally, you will use display: inline-block for your innermost messages elements. Since they are the only child of their parent tag, you won't have to worry about elements winding around on one another. By using the inline-block, width is respected and this gives us a great place to apply the background color.
.messages {
display: inline-block;
min-width: 150px;
background: #ffeec0;
padding:2px;
margin:3px;
-webkit-border-radius: 2px;
border-radius: 2px;
border:1px solid #ffdd7c;
}
Just as a reference, one would expect your markup will look like the following:
<div class="frame">
<div><div class="messages">2014</div></div>
<div><div class="messages">2014</div></div>
<div><div class="messages">
2014-09-20 17:46:41 minhavidaemquotes:555
</div></div>
<div><div class="messages">
2014-09-20 17:46:41 minhavidaemquotes:555 this is some extra
text
</div></div>
</div>
I think you'll find this gives you the intended effect. By the way, this is a general solution -- but if you choose a min-width that is larger than 50%, you will ensure that two siblings of type inline-block will be too wide for a line. If you do this, then you can dispense with the extra div in the markup.

How do I stop right floated DIVs from pushing each other around, but only within a particular area?

I am almost certain this question will get closed for having been beaten to death before, but I swear I could not find a sufficient answer, here or by Google.
I have an HTML page where the width is constrained to a certain maximum. This text also has a lot of associated images in DIV tags, that are floated along the right.
I've made an example JSFiddle which is slightly exaggerated. The real life situation doesn't have so many floated elements. In any case, the more the containing blue bordered DIV approaches the maximum width, the vertical distance between the red bordered DIVs is not high enough, and the lower DIV gets pushed to the left.
So, I tried adding clear: right; to the DIVs, but then an added problem creeps in, which is that they clear relative to everything, including elements outside the containing DIV. The green bordered DIV outside the container pushes the red bordered DIVs down, which is not desired.
Is there a way to to force the red bordered DIVs to move under the DIVs above them, and constrain the effect to just within the blue containing DIV so that the green bordered DIV does not push the red bordered DIVs down? I am open to solutions that involve Javascript, though pure CSS would be ideal.
This is the CSS:
#otherthing {
height: 300px;
width: 80px;
border: green thin solid;
float: right;
}
#container {
max-width: 36em;
border: blue thin solid;
}
.test {
border: red thin solid;
float: right;
clear: right;
height: 180px;
width:60px;
}
#container {
position: absolute;
}
FIDDLE here

multiple div heights to match single tallest div height?

I have a layout with multiple divs side by side and the will be populated with random text in each div. Is it possible to have the height of the tallest get matched by the rest of the divs regardless of the amount of text they have?
Basically I need the divs to be height:auto; and lets say, the second div has so much text that it's height becomes about 200px and the rest of the divs only have enough text to make their height about 100px. Instead of the 200px div being the tallest the rest of the divs extend to match the 200px div and create a uniform look.
Is anything like possible purely using CSS or would JavaScript need to be used?
Sorry if this sounds confusing, I would post an example picture but I don't have enough points (boo!)
Fiddle
You could lay them out like a table as in this updated Fiddle
.container {
display:table;
position:relative;
border-spacing:20px;
}
.block {
display:table-cell;
position:relative;
width:190px;
height:100%;
background-color:FFF;
margin:0px;
padding:10px;
text-align: center;
border:solid 1px #CCC;
font-size:small;
}

Scrollbar appears on full screen while CTRL +

I have some divs and I want that when I get the screen bigger(CTRL +) , the scrollbar appears at the bottom of the page and the divs STAY inline block. I have the code here(http://fiddle.jshell.net/JNzFp/) and as you can see when you get the screen bigger , scrollbar appears under the divs and I want it to display on the bottom of the full screen not under the divs, and ALSO I don't want vertical scrollbar.
Use this CSS overflow:hidden
http://fiddle.jshell.net/zCxhK/
Below is a demo of the different overflow properties.
UPDATE: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
Scroll bar appears in #menu div because you have used overflow: auto in its css. Use hidden instead of auto for not allowing scrollbar to appear below the divs
UPDATE- For that you have to make your menu div 100% of the body
DEMO
CSS -
#menu{
white-space:nowrap;
overflow:auto;
width:100%;
/*height:40px;*/
height: 100%;
margin:auto;
padding:0 0 12;
background:url(file:///C:/Users/Windows7/Desktop/imgbg.jpg) repeat 0 0 #f8f8f8;
border:1 solid;
border-width:0 1 1;...

resizable div area

I have two divs that I am using within a fieldset to keep separate some of my page areas
<fieldset style="padding: 20px, 20px, 20px, 20px; background-color: #EAEAEA;">
<div class="col1" >
...
</div>
<div class="col2">
...
</div>
with the following style:
.col1 {
clear:both;
float:left;
overflow:hidden;
width:10%;
}
.col2 {
float:left;
width:90%;
}
First, I wanted to have a little way of visually separating them, so I added to col1:
border-right:2pt solid black;
Well, this added the black line, but now my col1 div is ABOVE my col2 div. How can I correct this? I thoguht maybe it was a margin thing, but adding 2pts of right margin didnt help.
Also, I'd eventually like to make this divider a place where I can pan left/right to resize the two div relative to each other (i.e. make one 30% wide, the other 70%, or 10%, 90% etc)
Since your using % as your width you are using 100% of the screen resolution so you need to reduce the width of col2. Since your adding a 2pt border which essentially takes you over the 100% you need to make sure you adjust the width. You could either adjust col2 or col1, I adjusted col2 below for you.
.col1 {
clear:both;
float:left;
overflow:hidden;
width:10%;
border-right:2pt solid black;
}
.col2 {
float:left;
width:89%;
}
Example
You can't add a border to a screen that is already 100% filled.
Eg. if your screen is 1000px, and you have it split in 10%/90% you now have two objects that are 100px and 900px respectively. Adding the border would make it 102px and 900px which gives a total of 1002px (2px bigger than your screen) and therefore it'll wrap.
Either use fixed sizes for the width or put another container inside it.

Categories

Resources