The following is an example of the layout I am trying to achieve. The only problem is, I want to hide the overflowing part of the blue box without screwing up the rest of the layout. Any takers?
http://jsfiddle.net/seB5F/27/
Is this OK? http://jsfiddle.net/simevidas/seB5F/33/
You have to remove position:absolute.
I'm using display:inline-block + white-space:nowrap instead of float.
Enhanced demo with font-size:0 hack: http://jsfiddle.net/simevidas/seB5F/34/
Youre CSS attribute for that div is 'absolute'. You probably want something like 'relative.
At your css
#stretchable-div{
background:blue;
position: absolute;
width:200px;
}
In addition to the answer #vicTROLLA gave, you can use javascript to get the width of the red box, then set the width of the container for the blue boxes (stretchable-div, or whatever), and then set the overflow on that container to hidden.
So either you use relative to get it to act like it's inside that red box (may screw up positioning) or you use JS to set the correct styles on that blue container once the red has been rendered. note, if you set the width on the container, it will automatically try to wrap the inner boxes below. You'll probably want to use some calculation or hard-coded number to set the height, as well.
For example, making your CSS look like this:
#stretchable-div {
background: none repeat scroll 0 0 blue;
height: 60px;
overflow: hidden;
position: absolute;
width: 200px;
}
It looks like what it sounds like you want. You would need to use either Javascript or a server-side language to calculate the correct widths/heights, unless you want to hard-code it.
How about something like this http://jsfiddle.net/seB5F/32/
Related
When I switch off the blog part and sidebars in the terrifico theme in Wordpress I don't seem to be able to place a full width slider anywhere.
The theme looks like this in the form that I'm talking about: http://vpthemes.com/preview/Terrifico/page-full-width/
As you can see all the text is 'bounded' by a box (the black line). Is there any way in which I can make the metaslider go OUTSIDE of this box (i.e. to span the FULL width of the page)? I don't necessarily want to get rid of the box all toghether, the text can stay within it.
I have seen on the Metaslider website that some solutions for certain themes are given (here - but I am not sure how to adapt this to the theme that I'm using.
Thanks in advance!
Disclaimer
Before I suggest a solution, I'd like to point out that what you're asking is to break the Box flow model. I wouldn't recommend that because you're likely to run into inconsistent results across browsers.
That said, what you're trying to accomplish is possible. You could use javascript to do this and it may in fact be easier in some respects but here's a CSS solution.
1. Break out of the box model
float: left;
width: 200%;
margin-left: -50%;
text-align: center;
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
The width of the container is still relative to its parent so if you use % units to scale it up you would need to compensate for the responsiveness of the parent. Here, I'm just overcompensating.
To ensure that our element remains centered, we use a negative margin that is half of the overflow. That is, we want our box to be 100% wide, we have 100% overflow to ensure that so half the overflow is 50% (comment below if that doesn't make sense).
We use text-align to put the element we add in step 3 in the center of the viewport.
2. Allow Overflows
This is where you may well break themes. The parent elements will hide elements that float outside of them if they have the overflow: hidden property (note overflow can also be used to show scrollbars).
You will need to ensure that the parent elements have:
#post-body, .content-posts-wrap {
overflow: visible;
}
As far as I can see that affects #post-body and .content-posts-wrap
3. Add an element that will be the right size
Now we have an oversized container for our slider but we need it to be the width of the page. Inside the div or whatever it is you want to put your slider into you will need to nest another element that will be the correct width. That element will need the following css:
display: inline-block;
width: 100vw;
text-align: left;
You need display because we are back to the box model now and we want our block to obey the width rule we give to it.
We set our width using vw (viewport width) units to make this a bit easier (but they may not be supported on your target browser). There may be some ingenius way to do this without vw units but I would probably just use javascript if it's not an option for you.
Finally, since we set our text-align above, we need to reset it here.
4. Add a Clearing Div
Because you've broken out of the flow, elements aren't too sure what to do. You probably want to add another element after your parent slider that
specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. source
It can be as simple as a <div> element with:
clear: both
write your code something like this...
html like that...
<div id="parent_for_slider">
<div id="slider">
//place your slider code
</div>
</div>
Css for that
#parent_for_slider{
position:relative;
}
#slider{
position:absolute;
width:100% !important;
height:auto;
}
i am recommending to use ResponsiveSlides.js for full width slider with responsiveness
This is a hard one to describe, but the fiddle shows what I want to do:
https://jsfiddle.net/zbh8ewqg/
I want to align the #inner div so that the top of the bottom div aligns with the top of the #outer div.
Not to tricky using JavaScript, but can it be done in pure CSS?
(Note: in practice the number of elements will be dynamic, and the height not known because, for example, the font may change, thus solutions with hard-coded numbers don't help. I'm not trying to transfer the calculation from JavaScript to my brain.)
try to add this code. It will give same output as mention on jsfiddle.
div#inner{
position: absolute;
top: -75px;
}
Not really sure what are you trying to achieve, because I would recommend changing the mark-up div arrangements.
But anyway, here is a pure css alternative: https://jsfiddle.net/x8f2os39/
enter code here
If you add to your div's a fixed line-height then it can be very easy to calculate what value for topyou need.
If:
div {
line-height:20px;
}
Then you just need to add top:-80pxto your #inner div (4 divs above, 20px each)
Fiddle
http://jsfiddle.net/eDYDD/
Seen above is a jsfiddle that mostly explains what I'm trying to do. I can't seem to get the #main_info to fill the 100% height of #main, so the border will fill 100% of the div and you know, look nice. Any help would be appreciated.
In CSS unless a parent has a fixed height, you cannot make a child fill 100% of it's height, without some trickery.
You can use display table to make the elements behave like a table, ensuring that the child fills out the parent.
You can make it so the border-right in your case is visually managed by the parent element, using a background image.
You can use JavaScript to maintain the appearance of the two elements.
Which one of these applies to you really depends on your use case. Since your avatar info is simply a border-right at this point, creating a visual border on #main_info is probably the easiest way to go.
Using a table based layout would also solve this nicely, but would require extra markup to ensure that you have a table element, a row element and a cell element.
Use absolute positioning.
#main {
position: relative;
}
#main_info {
height: 100%;
position: absolute;
}
http://jsfiddle.net/eDYDD/3/
Take a look at Equal Height Columns with Cross-Browser CSS:
Creating equal height columns with CSS is not as easy as it may first seem. This tutorial highlights the display problems that occur with multiple column layouts, and then shows a simple solution that works in all common web browsers. The method shown here is 100% CSS hack-free, image-free and JavaScript-free so it can even be used on the most strictly coded websites.
I modified your jsfiddle. The other answers miss out the easiest solution, which is to inherit your min-height property of the parent element:
#main_info {
width: 20%;
min-height: inherit;
border-right: 1px solid #E4E4E4;
}
I have have some dynamically created divs in a fixed width parent div and I would like to have them distributed horizontally. As they are dynamically created so I wont know how many are in the container unless I count them with JS, which I am trying to avoid.
I was originally trying out the "Using inline-block and justified text" technique on this page; however it seems to behave a bit erracticly when there are more children than will fit ( ie when there are two rows ), ( see the second row here ) so I don't think that will work.
*Edit: Actually I just realise now that it's not actually erratic, it IS spacing the second line correctly, but what I want instead (in this particular instance anyway ... ) is for the three red boxes on the second line to take up positions under the first three of the first line, leaving two positions free at the end, rather than spacing them out too ) .... so I think in general this technique is not likely to ever work for me.
Are there any suggestions of other ways to achieve the above. I would rather not have to use JS but if there is no other way then I am open to suggestions.
It's not failing, that's the native behaviour of floats.
If you want more to fit per line, made the container bigger or the boxes narrower.
If you don't want them wrapping at all, add overflow:auto to your container's CSS and you'll get a scroll bar.
You need to make remove the width of your container and add display: inline-block; to allow the dic container to have a width of whatever the content inside has. Also add overflow: auto; in order for the div to size to the amount of generated divs in it
#container {
display: inline-block;
background:olive;
overflow: auto;
height: 180px;
}
Perhaps use relative widths rather than fixed widths for the interal divs....
#testcontainer div {
width: 19%;
height: 30px;
display: inline-block;
background: red;
float: left;
margin: 2px;
}
DEMO
I ended up conceding that I need to use JS. I added id's to the fourth child and then in CSS I was able to remove the margin from the fourth child ( all of this I presume could have been done in CSS using nth child if I hadn't needed IE8 support ).
Edit: Finally ended up getting what I want - http://jsfiddle.net/byronyasgur/kUgBA/14/
I'm developing a 4 column footer in CSS, but after wrestling with this for a few hours there are two things that I cannot achieve.
1) Replicating the padding of the first column in the three subsequent columns
2) Extending the vertical border the entire 250px.
Does anyone have any ideas? Here is my code
http://jsfiddle.net/FdHAR/
The best thing to do here is to add a class, possibly footer-column, that you apply to each of the divs. Then put those four divs in a div with the class footer. Your structure would look something like this:
<div class="footer">
<div class="footer-column" id="footer_column1">...</div>
<div class="footer-column" id="footer_column2">...</div>
<div class="footer-column" id="footer_column3">...</div>
<div class="footer-column" id="footer_column4">...</div>
</div>
Obviously, we need to change the styles foor this to look right.
Padding
Let's address the padding first: all you really have to do is select the class and put some padding-left and padding-right on it. It will automatically apply the same padding to each one that way. Also, to make them appear side-by-side, we need to float them. Something like this will do:
.footer-column {
float: left; // Push the div as far up-left as it can be put
width: 25%; // Make sure to subtract the padding
padding: 10px; // We want padding on all sides to make things look nice
}
Now that that's done, let's fix the borders.
Vertical Borders
This is a bit more difficult, unless you know the overall height of the footer. Either way, we can use the CSS selector :first-child to apply the borders. This should do it:
.footer-column {
...
border-left: 1px solid black; // Whatever border you want goes here.
}
.footer-column:first-child {
border-left: none;
}
If you know the height of the footer, you can force that height, and the border will work just fine.
.footer-column {
...
height: 250px; // Force the box to be 250px tall
}
If you don't know the height of the footer, you'll have to use some other styling and possible javascript. But I'll assume you do since you stated a specific value in the question.
You want to use display: table and display: table-cell: http://jsfiddle.net/FdHAR/3/
1) Add
padding-left: 15px;
to #col2,3,4 moves the text off of the vertical white bar. You may need to play with the value to get the exact spacing you're looking for.
2) add height: 250px; to #container4 to make it the right size.
Caveats: this is after a few minutes of adjusting on safari -- your browser may vary...
Played with this a bit, I think this is closer to what you want and should work well across browsers. I'd recommend a fixed width or a min-width on the footer (<footer> is html5).
jsFiddle
Some constructive feedback:
Try to combine your styles as much as possible. No need to re-write and re-set padding, etc across similar elements.
You had div, inside div, yet were treating them like columns. A simpler approach is to use a list and think of each list item as a column. If you wanted to do divs, then don't put them inside each other.
I like to use em for setting font-size or line-height, but use px for anything else. (personal preference, makes sense since it's a screen you're usually working for)
Try to set only 1 or 2 specific strict sizes and then use percentages of that. A good thought is setting the footer font-size to 1.2em, then the h1 could be font-size 130% and smaller could be 80%. This also works well for width, etc. (each column is 25% of the parent).
a jsFiddle hint, you don't need to put the whole html doc there, just the part you want to fiddle with, same for css and jquery drop the ,.