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).
Related
I would like to align div inside parent div to center horizontally for div with unknown width and dynamic content (will wary from use case to use case.
I have read that margin: auto; usually is usually solution here, but it requires set of width which is unknown for me compile-time. text-align: center does't work for div inside parent div.
Fiddle example
Here is a Fiddle example.
My two questions
I would like the three circles to be aligned to the middle. Number of circles can vary from zero to many.
Another related questions is how I can make the progress bar have a minimum width (for instance when having only one, two or three steps) and strech to right and left when adding more steps? Here is (very bad) illustration in Paint.
As a note I would like this to work for IE 8 as well.
Do you want something like this? DEMO
.progressbar{
top: 0;
position: fixed;
background-color: #00bbee;
width: 100%;
height: 45px;
left: 0;
text-align:center // added this line for centering the content
}
.steps {
display: inline-block; // and this line for auto-aligning center your child elements
}
Your first question can be solved by applying
text-align: center to the top wrapper and changing the display of the steps wrapper to inline-block
Regarding the second question, I'm not sure that this is exactly what you meant - but it can be solved by moving the line out of the steps wrapper and positioning it at the vertical center of the whole bar using
position: absolute;
height: 2px;
margin-top: -1px;
top: 50%;
left: 0:
width: 100%;
background-color: black;
Example in this fiddle
note that I also changed your html because there was some unnecessary tags there
For IE8 support check out this question (the only problematic issue here is the use of inline-block
Id like to know why my inner wrap of the desktop css for this site is not working.
Basically if set innerwrap to margin:0 auto; and width: auto; there is no problem, but it's not centered on the footer or main div
When I have innerwrap as it's currently set margin:0 auto; and width:960px; you'll notice that the page presents a horizontal scroll bar after resizing the window a bit, and all the content is squished to the left with a white background starting to become visible.
Is there anyway to have it transition fluidly to the next tablet size layout without have a scroll bar appearing and content getting squished?
It shows Scrollbar because of the padding you apply in .innerwrap
Read this article about the Box Model
Use of padding on the sides of certain elements when applying 100% width to parent element its not recommendable because it adds width to the whole group, and since you,re using the browsers width it shows the scrollber to see the extra space you added.
My humble advice is that if you want a block element to appear centered apply an margin:auto style rule whenever is possible, the same also has to be displayed as a block element with no float.
Remove this:
.innerwrap {
margin-left: auto;
margin-right: auto;
padding-left: 10%;
padding-right: 10%;
width: 80%;
}
Keep This
.innerwrap {
margin: auto;
width: 960px;
}
Since you are applying fixed margins for you social icons they will show misplaced, so don't use fixed margins for centering them, use percentage width instead.
you may want use a common class for aligning them
.social {
background-position: center center;
background-repeat: no-repeat;
display: block !important;
float: none;
height: 150px;
margin: auto;
padding-top: 50px;
width: 30% !important;
}
For a.twittersocial and a.twittersocial:hover and the rest of the social links just keep the background properties.
Create a determined class if you need to apply common style rules to several elements (if there are many of them) and avoid usage of ID selectors whenever is possible, use classes instead (.daclass).
Use a web inspector like Firebug to track down styling errors.
Good luck Developer!
I need to create a dialog box using custom images created by a designer. For purposes of this discussion, this the correct answer for my application. The dialog box must be able to withstand changes in width and height. This is easy to do with a table, but I want to maintain a table-less design, so I figured that I could do this using 3 rows of DIV's. For example, float an image to the left, float an image to the right, and put a DIV in between then with the image set to the background so that text can be entered over it.
Here is demo of my failed attempt to do this: (just one row shown)
http://www.seaburydesign.com/rounded/demo.html
As you can see, this almost working. But the DIV in the middle is only the size of the content inside of it, even though I have set the height and width. I need to keep the width flexible.
Any ideas on how to fix this?
Remove the following line:
display:inline;
Besides being useless in this case (the inline behavior is already working because of the floats) "inline" property doesn't allow you to set the element's width or height. For a clearer understanding, read w3c's article.
If you make the rounded corners of your images white instead of transparent, you can apply the background-image to the header-tag instead of the middle div. This will create the impression that the middle div has the same height as both images.
Update
If possible (depending on what browsers you need to support), you could do rounded corners with CSS3's border-radius property, instead of using images. That would be something like:
header {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
You could also try this border-radius CSS-generator to find the properties that suit you best.
The css display: inline in your container div's voids any setting for width. Use display: block; float: left; margin: 0 XXpx; for your div (with XX being the width of the images on the sides).
Edit:
Concretely this would be:
div#yourdiv {
background-image: url("images/module_header_bg.jpg");
color: white;
display: block;
float: left;
font-weight: bold;
height: 42px;
width: auto;
}
and both img tags
img {
float: left;
}
This creates a dynamic sized box for your content, or you set width of the div to a specific value like width: 300px instead of width: auto.
I currently have a footer that uses a 3 column layout with a fixed center and fluid sides in order to get a nice box shadow effect. When the window is too small however, it pushes the footer to the left, and messes everything up.
I can't seem to figure out how to make sure the footer divs do not get pushed around. I keep running into this problem with my layouts.
The layout I am working on is here, and a screencast showing the problem is here.
The easiest solution is simply to add min-width:980px to #container.
#container {
background: none repeat scroll 0 0 #A8D9A7;
height: 100%;
min-height: 100%;
position: relative;
z-index: 5;
min-width: 980px; /* add this */
}
The 980px figure comes from the width:960px + padding-left:10px + padding-right:10px of the #content-container.
The container element for your main page body (<div id="body">) has computed padding-left of 10px, and the second container element, (<div id="content-container">) adds another padding-left of 10px, meaning your main body is padded from the left by 20px.
Whereas the container for your footer (<div id="footer-container">) has computed padding-left of 0.
If you add this, it will fix your problem. #footer-container {padding: 0 20px;}
Revised as the above solution messed up bottom box-shadow.
In the #footer-left-outer { rule change:
margin-right:470px;
to:
margin-right:-490px;
In the #footer-right-outer { rule change:
margin-left:-470px;
to:
margin-left:-490px;
In the #footer { rule change:
padding: 10px 10px 10px 10px;
width: 940px;
to:
padding: 10px 30px;
width: 980px;
I now understand why you were using the outer-right and outer-left.
I found a different solution that includes the partial box-shadow effect:
http://jsfiddle.net/nottrobin/Cr4NF/10/
It avoids the need for footer-left-outer and footer-right-outer but I'll leave it up to you to decide if it's neater.
It makes use of :before which only works in IE8 onwards:
http://caniuse.com/#search=:before
But then box-shadow doesn't work in IEs < 9 anyway:
http://caniuse.com/#search=box-shadow
I've been trying to do something extremely simple, yet I can't make it work!
Here's what I'm trying:
---margin top: 15 px
---VARIABLE HEIGHT DIV (imagine a box-like element)
---margin bottom: 15px
I basically want the box to resize based on the browser window height.
Here's what I've been trying:
CSS
body {
background-color: #D0CDC5;
height:100%
}
#info_box {
background-color: rgba(40,40,40,0.5);
border: rgba(34,34,34,0.9) 1px solid;
width: 350px;
height: 100%;
margin: 15px 0px 15px 20px;
}
#info_box p {
color: red;
}
HTML
<body>
<div id="info_box">
<p>Sample Content</p>
</div>
</body>
By the way, why is that the text appears 15px from the top of the div? Why isn't it flush?
Thanks a lot guys,
**EDIT
See this link, very good answer for all browser but IE6 and 7. another HTML/CSS layout challenge
Thanks to #Hristo!
UPDATE
Check out the fiddle...
Edit, Full Screen
Check out the fiddle... http://jsfiddle.net/UnsungHero97/uUEwg/1/
I hope this helps.
Hristo
if you don't need to support IE6, and this is not part of a bigger layout, there is an easy way:
#info_box {
position: fixed;
left: 0px;
top: 15px;
right: 0px;
bottom: 15px;
}
alternatively, you could make #info_box stretch the full height, and put a position: absolute div into it with the same data as above.
I'm not entirely sure whether there's a way to do this without absolute or fixed positioning, because no matter whether you use padding or margin, you'll always end up adding 30 pixels to what is already 100% of the height. I'm happy to be proven wrong though.
Elements get their height based on the content inside them. So you already have an element that is centered and that will have margin top and bottom of 15px from the top and bottom of you site's body.
But if you want an element that will always be centered middle of screen, filling all but 15px top and 15px bottom, it is not achievable with "conventional" means. It will either have to be an image or a re-sizable box that will have a scroll-bar if the content is bigger than screen size.
Anyways, if that is what you want, give it a fixed size and height, and use position:fixed.
If you always use a consistent browser resolution, then it is doable. But if your screen size changes, depending on the device you use (tablet, mobile etc.), then this cannot be accomplished though CSS alone.
I have done this dynamically using jQuery.