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.
Related
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>
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.
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;
}
I have a problem with background image positioning - since we all know, it is quite simple to position a background that repeats itself and STARTS from a certain point from top, what I want to say - let's pretend we want a black background to start 100px from top of page and then repeat-y.
My question is - how is it possible to do the same effect, but the background to repeat-y itself from the bottom, I mean that these 100px of space at the bottom would not be filled with a background.
For now I was lucky enough just to make it so if there is no scrolling, because if there is scrolling, then I see a black background, then 100px at the bottom of window and if I scroll down i see that 100px stripe at the bottom always while scrolling. What I want to make is for background to fill the screen but stop when there is 100px left at the bottom
(at the bottom I want to add a logo which is transparent, so the solution with overflowing one element with another or z-indexing tricks currently is not an option....)
body {
background-image: url(UI/img/stripe-stripe.png)!important;
background-repeat: repeat-y !important;
background-position: right -100px;
background-color: #e6e2df !important;
}
This does not work... I want for a background to repeat vertically but to stop at the bottom when there is 100 px left.
Why don't you just apply the stripe to a div surrounding your content; you could still have a background on the body tag and leave room for a 100px div at the bottom containing your logo:
<body>
<div class="content">
Content goes here.
</div>
<div class="footer">
Logo goes here.
</div>
</body>
And then in your css:
div.content {
background-image: url(UI/img/stripe-stripe.png)!important;
background-repeat: repeat-y !important;
background-position: right -100px;
background-color: #e6e2df !important;
top:0;
bottom:100px;
width:100%;
}
div.footer {
height: 100px;
}
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;...