I am sure this has been covered but I'm not sure what to search for.
I have 2 divs inside of 1 div. The 2 inner divs I float:left so there are 2 columns.
The first div is of class .username. The second div is of class .commentText. The outer div is called .comment:
.comment{
border: 0px;
clear: both;
}
.commentText, .username {
float:left;
}
However if the sum of the content of the 2 inner divs is greater than the width of the outer div, then the second inner div drops below the 1st inner div.
For example: in the picture below the timestamps are in username div. The comment is in commentText div. Notice the bottom comment bumps below the timestamp.
What I get:
What I want:
What I would like is for the commentText on the bottom comment to maintain the width that it would be if it were only 1 line and just grow vertically. Also note that the .username div in each comment has different widths.
THANKS!
EDIT:
I just found a decent solution in which I use max-width: 20% for .username and max-width: 79% for .commentText, but the problem with this is I don't want to limit the width of the username div. and if the username is short and the comment is long, then it doesn't fill all the way to the right side of the outer div.
I understand it isn't cross compatible on all browsers from all epochs but #bybe gave me a suggestion with a fiddle to use display:table-cell. This works great.
.commentText, .username {
display:table-cell;
margin:0px 0px 10px 0px;
}
.username {
padding: 0px 15px 0px 0px;
white-space:nowrap;
}
Related
I have 3 div's:
.left, .right {
width: 30px;
resize: none;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
max-width: 960px;
margin: 0 auto;
}
What I want to achieve is that only the middle one resizes when resizing the browser. In the left and right div there is an image that is part of the design.
When I make the browser smaller, the left en right div will narrow at one point and it seems that it is getting pushed into the center div. This makes the content of the center being pushed down. How can I make sure the 2 div will stay #30px?
Strange thing is, in the jsfiddle it does work...
jsfiddle
The issue is with the <img /> element you have in the header. When you hide it you can see that it no longer interferes with your layout.
The problem is because the <img /> element will expand to the maximum size of the container, which is 100%. That 100% does not include the 30px you have reserved for each side, as floated elements are taken out of the document flow. Declaring 100% of a child element means it will expand to the width of its parent elements, without taking into account the extra space taken up by floated siblings. Therefore, a solution would be using CSS calc to constrain the width of .center, and float it to the left, too:
.center {
width: calc(100% - 60px);
}
Alternatively, you can give .center a margin of 30px on the left and on the right. The floated divs will ignore margins because they are taken out of the document flow, and will fit perfectly within that 30px corridor you have created for them.
.center {
margin: 0 30px;
}
Both methods I have tested and verified by playing with the Inspector on the link you have provided. The calc() method might suffer from lack of support in older browsers, while the margin method will work for most browsers that are in use today :) pick any one.
Try setting the horizontal margin for your center div to the known width of the left and right divs:
.center {
max-width: 960px;
margin: 0 30px;
}
I am trying to use CSS3 columns to order some divs top to bottom then left to right. It seems to work pretty well but I have this one issue as shown in the image below. I give each of the divs a background and when I adjust the height of my window, instead of moving the entire background in one block as I would like, it progressively adds it, separating the background between two columns. This looks REALLY bad. I was wondering if there was a way to preserve the background of my divs so that as soon as the window becomes too small to accommodate even one pixel-height of a div, it moves the entire div to the next column.
Secondly, I would like to center the column(s) on the page with regard to the window size. I want this to work in Chrome (any recent version), Firefox (Any recent version), and IE 10.
You can fiddle here: http://jsfiddle.net/eE3z6/
#mainContent /* The containing div */
{
position: absolute;
top: 50px;
bottom: 50px;
margin: 10px;
column-width: 400px;
-webkit-column-width: 400px;
-moz-column-width: 400px;
}
.blockData /* The divs inside are all of this class */
{
position: relative;
width: 380px;
height: 30px;
padding: 4px;
margin: 0px 0px 10px 0;
border: 4px outset grey;
background: lightgrey;
}
Just add -webkit-column-break-inside : avoid; and display : inline-block for .blockData
Demo at : http://jsfiddle.net/eE3z6/4/
I thought I answered this yesterday. You need to take the float:left off of the .blackData and .listData styles and add a padding-bottom to your .listData style. 20px seems to work. The columns is checking the content (not the background) when deciding what to send to the next column and by adding padding to the bottom of the .listData you are making the content the same size as the background.
Also, on your jsfiddle you have .blockData style in there 2 times, so you need to take one of them out.
If you want to make it so that the columns will center on the main content div you will need to take off the position:absolute style from #mainContent and change .blockData margin from 5px 0px to 5px auto. By adding the auto to margin you will automatically center the content. I would also suggest taking the margin off the top of .blockData and only putting it on the bottom, so that all the columns will align to the top.
Now, when you take off the absolute positioning from #mainContent you will be able to center the blocks, but it will not readjust and send one block to the next column, but will even out the number of blocks in each column (i.e. instead of having 7 in the first and 1 in the second it will have 4 in the first and 4 in the second). It really depends on how you want it to be displayed.
I also, fixed up your jsfiddle. just turn position: absolute off and on for #mainContent and you'll see what I'm talking about.
EDIT:
instead of using-padding bottom to keep from cutting off each background you can use display: inline-block on the .blockData (this is similar to column-break-inside: avoid in this case but works on all browsers).
i'm having a problem with divs.
I've been searching but couldn't get a solution.
I have 2 divs in a header. One containing logo and other contanining other things. First is 210px width and the second is 100% width (Fill available space).
I want to have the two on the same line.
I've been trying playing with display: inline, inline block, float left, but not working, second div is taking 100% of page and displaying below logo div.
Thanks in advance.
Source: http://jsfiddle.net/ukDQS/1/
You don't need most of that junk. It's pretty easy. You're over thinking the problem.
First, a div is 100% by default, so you don't need to have the 100% on it. Second, you just need to float the logo left, and assign a width to that. That's all there is to it. Get rid of all the display and other float and other kinds of positioning elements.
http://jsfiddle.net/QYftP/
Follow the solution:
http://jsfiddle.net/ukDQS/3/
div#header-right-content { div.logo }
#logo {
float: left;
height: 80px;
padding: 5px 0 0 5px;
width: 210px;
}
#header-right-content {
height: 80px;
margin-left: 210px;
position: relative;
}
You don't need to set width 100% to the second div, because it'll expand to the fullr est of space.
Everything is wrapped in a div with an id="main_wrap"
the main wrap has this style:
#main_wrap{
margin:0 auto;
width:960px;
position:relative;
}
Since everything is wrapped inside of this div, I don't understand why a horizontal scroll bar would appear at the bottom.
If any of the children have borders, padding (or sometimes margins) applied to them, that adds to the width and height. Using overflow: hidden; would avoid the scroll bars. But, if something has too much width, you probably want to find where it is coming from to avoid possible problems in the future.
Note that you may be able to use box-sizing: border-box to prevent borders and padding from adding additional width (or height). This is particularly useful when you are using something like width: 100%, but width: 100% also isn't necessary in most cases - elements with display: block applied will fill the width by default AND keep padding and borders from adding additional width.
For example:
html, body { margin: 0; padding: 0; }
div {
background: #111;
color: #eee;
padding: 1em; /* This doesn't add to width - still at 100% width */
border: 2px solid #5e5; /* This also doesn't add to width - still at 100% width */
}
<div>Test</div>
Try add overflow hidden:
#main_wrap{
margin:0 auto;
width:960px;
position:relative;
overflow: hidden;
}
That should work (but is hacky).
If the elements are side by side and have a combined width or , as BDawg says margins or paddings, that cause it to exceed 960px a scroll bar could appear. Post your entire code and we can figure it out very quickly. Hiding the overflow should work but it would not really explain why the scroll bar is appearing. Giving us your entire markup will help find the root of the problem.
Somewhere you've left any DOM elements unseen which occupies the extra width. it's better to find and fix the children than to use overflow:hidden . overflow:hidden will hide the scroll bar if user zooms in the page.
Working 100%
if you are using bootstrap it takes
margin-left & right 15px (or) -15px
you need to change 15px to 0px
Example
.main_wrap .row{
margin-left:0px;
margin-right:0px;
}
If you change width to 100% it helped you, but if you don't want, just try add external <div style="width:100%"></div> like this:
<div style="width:100%">
<div class="main_wrap">
%your content%
</div>
</div>
I'm trying to build a quick overview that shows the upcoming calendar week. I want it arranged horizontally so it can turn out to be quite wide if we show a full calendar week.
I've got it set up right now with an inner div with a fixed width (so that the floated "day" divs don't return below) and an outer div that's set to width: 100%. I'd LIKE for the outer div to scroll horizontally if the page is resized so that the inner div no longer fits in it, but instead the outer div is fixed larger at the width of the inner div and the page itself scrolls.
Gah I'm not good at explaining these things... Here's a bit of code that might clear it up..
The CSS:
.cal_scroller {
padding: 0;
overflow: auto;
width: 100%;
}
.cal_container {
width: 935px;
}
.day {
border: 1px solid #999;
width: 175px;
height: 200px;
margin: 10px;
float: left;
}
and the (simplified) structure:
<div class="cal_scroller">
<div class="cal_container">
<div class="day">Monday</div>
<div class="day">Tuesday</div>
<div class="day">Wednesday</div>
<div class="day">Thursday</div>
<div class="day">Friday</div>
</div>
</div>
So to try again - I'd like the cal_scroller div always be the page width, but if the browser is resized so that the cal_container doesn't fit anymore I want it to scroll WITHIN the container. I can make it all work if I set a fixed width on cal_scroller but that's obviously not the behavior I'm going for. I'd rather not use any javascript cheats to adjust the width of the div if I don't have to.
Your cal_scroller class is 100% + 20px (padding) wide. Use a margin on cal_container instead, like so:
.cal_scroller {
padding: 10px 0;
overflow: auto;
width: 100%;
}
.cal_container {
margin: 0 10px;
width: 935px;
}
See here for a description of how the box model works (in short, the everything is outside the width/height of an element).
Also, block elements (like <div>s) are 100% width by default, making your 100% width declaration redundant.
One problem I see is your width: 100% rule. div.cal_scroller is already a block-level element, so it'll default to filling the entire page width. (Not to mention that padding is added on top of width, so you end up with that div being bigger than the page.)
Just get rid of that width rule, and you should be golden. (I just tried myself, and it worked like a charm.)
I didn't read your question very carefully, but when you have width: 100% and padding, that's generally not what you want.
100% + 20px > 100% - that might be the problem.
I struggled with this a lot but the simplest solution I found was adding:
.cal_container { white-space: nowrap; }
This way you don't have to give it a width at al. It just makes sure everything stays in one line.