I am using the yui-grids css (irrelevant if you don't know what this is) with three columns. and I'm putting all the fancy design stuff on the left column and using z-index and relative psitioning bringing them in the center. and then putting all the important stuff like forms, inputs buttons, links and context in the center. Is this wrong. I've never seen this done so I was wondering maybe there is something I don't know! or am not considering. Should I just use one column?
I'm not totally sure what you're asking, so I'll give it a shot:
Columns
If you're going with a column layout, you should give just floating elements a go. Due to how floating works, a clearfix hack will be nessecary (link provided below). Clearfix allows child elements to be floated while maintaining the parent element's height and block nature. Clearfix can only be added to block elements.
For my example, we will be going with a 2 column layout -- one #content column and a #sidebar column -- you could do two, three or more.
For the parent div (that contains the #content and #sidebar elements), you'll need to add a class="clearfix".
For the content div, you'll want to float it to the left. For the sidebar div, you'll want to float it to the right.
Now, the CSS:
#parentDiv { width: 750px; margin: 0 auto; }
#parentDiv #content { float: left; width: 500px; }
#parentDiv #sidebar { float: right; width: 200px; }
This should produce a 750px box with a content element on the left and a sidebar on the right with 50px in between both elements (750-(500+200) = 50).
Floating Module
If this isn't what you wanted, and were looking to produce a module element (lightbox, popup window, etc) instead, this is easy too.
First, create a div called #module. Put in your content into it. Let's say you want to give it a width of 500px and you want the height to be static at 300px. So we'd do this CSS:
#module { width: 500px; height: 300px; border: 1px solid #000; position: absolute; top: 50%; left: 50%; margin: -150px 0 0 -250px; z-index: 100; }
What's going on here?
The #module element is being set to position: absolute. This means that it will be floating around the window, and is not constrained to it's parent element. We position it to be 50% from the left of the window and 50% from the top, so it gets in the middle of the window. Percent values are nessecary as they are adjusted when the window resizes. Without the margin, the element's top left corner will be 50% from the top and 50% from the left, so we need to use margin to move it back half of it's width and half it's height. This will allow us to have a box perfectly centered in the middle. The z-index is added to make sure that the element is on top of any other element, including , and other positioned elements.
I hope this helps.
Links
Clearfix: http://gist.github.com/550114
This kind of layout wouldn't be correct in my opinion.
The design of an element must be described in that particular element.
Related
I'm trying to eliminate the extra space in the #middle-panel underneath the .box-label text, but I need to maintain the functionality of the #middle-panel expanding when I get to smaller screen sizes and the text becomes stacked. But if I set a specific height on the #middle-panel to eliminate the extra space, it no longer expands to accommodate the stacked type.
This fiddle shows my current implementation:
Current Fiddle
If, in the fiddle, you add height: 65px; to the #middle-panel-inner-div, you will see the desired amount of space below the text. Unfortunately, if you then change the width: of the .red-box-and-label class from 25% to 20% (to represent what will happen at smaller screen sizes), you will see the text becomes stacked, but the #middle-panel doesn't expand to accommodate it. Delete the just-added height: 65px; and you will see that the #middle-panel has now expanded to accommodate the text, but once again with too much space on the bottom.
I've tried some solutions, such as: Div overlapping & wrong height
but none of them seem to work.
Any suggestions would be greatly appreciated!
This thing is happens because height is auto and parent div expand height depend on child div. So it takes it's child div height. Even though you give negative top value.
The solution of this issue is, remove negative top value and give margin-top to .red-box-and-label
Remove top: -30px; from #middle-panel-inner-div. And:
.red-box-and-label {
margin: -30px 0 0;
padding: 0;
width: 25%;
}
Updated Working Fiddle
Normally you'd need an inner wrapper for the #middle-panel-inner-div with a negative bottom-margin to compensate for the 30px you moved the boxes up with. But if you place it, you'd have to move all the flex properties from #middle-panel-inner-div to the inner wrapper. So it's easier to just make an outer wrapper for it, move the top:-30px; position:relative to it and add the margin-bottom: -30px to #middle-panel-inner-div.
Here's your updated fiddle.
Notice the change in markup and the relevant CSS code:
.aWrapper {
top: -30px;
position: relative;
}
#middle-panel-inner-div {
/* top: -30px */
/* position: relative */
margin: 0 auto -30px;
}
I have two divs. One that is floated left and one floated right. The one of the left has a width set to 18% and a min-width of 217px. I want to have the div on the right take up the remaining space, while also being able to resize to fit the window.
The problem I am having is that I can set the right div's width to 82% and to float right, which works until I make the window side too small, in which case the min-width of the left div kicks in and it stops shrinking. The right div doesn't have enough space to fit, so it is pushed down.
Here's some sample code.
HTML
<div id="div1">
stuff inside of it
</div>
<div id="div2">
stuff inside of it
</div>
CSS
#div1
{
float: left;
width: 18%;
height: 100vh;
min-width: 130px;
box-shadow: 0px .3em .2em #000;
z-index: 2;
}
#div2
{
width: 82%;
float: right;
z-index: 1;
}
So this is where I'm stuck, how should I approach fixing div2? I've tried using a table instead of divs, but a border appeared around the cells that I couldn't change and it removed my box-shadow, so I would prefer a solution without it.
Your thinking of using tables is somewhat on the right track, as table elements do actually have many properties that make them capable of such a thing, but as people are pointing out in the comments, it's no longer a valid approach to use table elements for the purposes of layout for non-tabular data.
This is why CSS implemented a set of style rules built to reflect those unique properties. You can set a container around two elements with the style display: table;, and then give it's children the style display: table-cell;
Setting the width for the right side div to 100% will ensure it always fills as much space as is available to it.
But, since table cells can't break to a new row when the content exceeds the width of the table, it will automatically adjust to fit. So when another div (the left one) has a specific min-width, the div on the right is given less space in order to keep the cells contained.
Here's an example using your code:
http://jsfiddle.net/Q5rjL/
CSS table display properties give you all the benefits of these unique elements, but without the semantic issues. They are great for complex layouts where other style display types fall short.
You can also contain floats with overflow:hidden:
#div2{
overflow:hidden;
z-index: 1;
}
The DIV will fill up the remaining space (http://jsfiddle.net/MAjwt/)
There are a lot of "fill available space" questions on this site, but my issue is a bit particular in that I've already gotten a solution, but it doesn't work for buttons. I'd like to understand why this doesn't work for buttons, and how I can make it work. I imagine it's just some browser-style for the button element that I need to override.
I have two floating elements within a (fixed-width, if that matters) wrapping div. The right element has fixed width, and the left element should take up whatever width remains.
I can accomplish that by setting the right element to have fixed width and float: right, and leaving the left element without any special styling. This works perfectly for divs. It also works for spans, but only if I set display: block on them. For buttons, I can't get it to work at all. I tried block, inline-block, and every obscure width value I could find on the MDN.
http://jsfiddle.net/wjFbD/2/
I don't know why I didn't think of just wrapping the buttons in divs earlier. Here's what I've come up with:
http://jsfiddle.net/SkczB/2/
This involves the overflow: hidden box formatting context trick (which I suspected was going to make an appearance here, but couldn't quite see where to fit it in). Highlights:
The two buttons are wrapped in divs with class buttonWrapper.
Those divs are formatted according to the trick I outlined in the third paragraph, above. The right div has float: right and a fixed width, the left div has no special styling.
We now apply the box formatting context trick. The left div is given overflow: hidden, which causes it to make space for the right-floated div.
We can now apply a left margin to the right div, and change its width, and the left div will always be the right size.
The divs create the desired "fill available width" effect for us, now we just have to put the buttons inside the divs and give them a height and width of 100%.
If it's the left button you wanted to have a fixed width, then basically repeat the above steps with left and right swapped.
This may not be exactly what you're looking for here, but here's an option that seems to have worked out for me with your fiddle.
If you've got a fixed width div that the elements are contained in, you could split get the remaining width of the div after button A has been set to fill up, say, 100 pixels and then set button 2 to be the remaining size.
Alternatively, another option would be to run it as percentages 20%/80%, 30%/70%, that kind of thing. Here's a fiddle that achieves what you're looking for on just the button wrapper at the bottom. I've applied specific classes for it and added divs around each button for a bit more control. The button wrapper divs are set to 20% and 80% respectively, while the button is set to fill 100% of the containing space.
Here's the modified fiddle and the modfied HTML/CSS. Hope it helps for what you're looking for...
http://jsfiddle.net/wjFbD/7/
HTML
<div class="btnWrapper">
<div class="buttonWrapperB">
<button class="left">
button Left
</button>
</div>
<div class="buttonWrapperA">
<button class="right">
button Right
</button>
</div>
</div>
CSS
.btnWrapper
{
width: 100%;
background-color: #FEE;
border: 2px solid black;
margin-bottom: 10px;
height: 50px;
}
.buttonWrapperB{
float: left;
width: 20%;
}
.buttonWrapperB button{
width: 100%;
height: 50px;
}
.buttonWrapperA{
float:left;
width: 80%;
}
.buttonWrapperA button{
width: 100%;
height: 50px;
}
I adjusted the background opacity of your .right elements to see what was going on below them. It looks like the .left elements are not only taking up the remaining space-- they're also taking up the entire row. Weirdly, the text inside these elements is centered as if it were only taking up the remaining space.
If you want the same to work for the buttons, it seems like the only solution involves a little hack. Buttons are quite complex indeed.
button.left {
margin: 0;
position: absolute; /*this seems to be the only way to get the button to stay on the same row - floating it left won't even work*/
z-index: -1; /*hides the "overflowing" part below the right button*/
width: 100%; /*make the button stretch to the full width of the row*/
padding-right: 400px; /*add a padding-right hack so that text will be centered correctly - should be same size as fixed width .right element*/
padding-left: 0;
display: block;
}
See updated fiddle: http://jsfiddle.net/wjFbD/6/
starting with
One element has fixed width, and the other element should take up
whatever width remains.
here is my general solution:
<div class="container">
<div class="two">125 €</div>
<div class="one">my favorite provider</div>
</div>
(stylus syntax, in your mind just add {,},;)
.one // red
border none
height auto
overflow hidden
white-space nowrap
text-overflow ellipsis
.two // green
float left
white-space nowrap
text-overflow ellipsis
You can set the one green thing to a fixed width, but indeed, you do not even have to! Things full up nicely. And String get's truncated with an ellipsis, if it gets too long.
Things get a bit more complicated, when one of them is a <button> rather than a <div> (and I can't figure out, which style property differenciates them, so I would need to style away), but anyway, with a wrapper, that also works:
→ See full codepen here. (Feedback appreciated.)
So what I'm trying to accomplish is to have a div centered on the page (margin: auto auto;) with a navigation div just to the left of it.
The idea being the navigation div can be switched on or off (so may or may not be there). If its there or not should not interferer with the centering of the main div.
Below is an example
I've tried a few things
Wrapping both divs with a main div. Setting the main div to margin: auto auto and then setting both child divs to float: left. The problem is that when the nav div dissapears the entire thing shifts left.
Keeping the middle div margin: auto auto; floating the nav div left and then using margin-left but this changes when the page gets bigger or smaller.
Any pointers would be appreciated in the best way to do this. I was hoping to avoid tables.
JSFiddle link
Try this:
In your html:
<body>
<div class="encasing">
<div class="leftmenu"></div>
</div>
</body>
In your css:
html, body
{
width: 100%;
height: 100%;
}
div.encasing
{
top: 50px;
margin-left: auto;
margin-right: auto;
width: 70%;
height: 500px;
background-color: green;
position: relative;
}
div.leftmenu
{
right: 100%;
width: 10%;
height: 300px;
background-color: red;
position: absolute;
}
The important parts are:
To put your block containing the menu inside your center block
Make the center block have margin-left: auto; margin-right: auto;
Make the center block have a relative positioning
Have the menu have a absolute positioning
Make the menu have right: 100%
The idea here is to make the left menu use the position of the center block and then adjust itself. Right: 100% will put the right edge of the menu on the left edge of the menu.
In the end, a really good trick in css is that absolute positioned elements adjust themselves relative the the nearest relative or absolute positioned parent. :)
A few solutions I can think of:
Use absolute positioning for the navigation div. You probably want to give the body element a min-width to avoid the navigation div overlapping the main div when the window is too small.
Three-column layout, e.g. two divs with fixed widths floated to the left and right, and the content div between them. Inside the left-floated div, display your navigation div (or not). Alternatively, try display: inline-block on the three columns. The difference is in how small windows are handled (try it out). Again, you can counter undesired effects by setting a min-width on the body.
Completely fixed layout. Decide on an ideal screen resolution, and hard-code everything to that. This way, you can absolute-position everything where you want it, but the downside is that it won't look good on anything that deviates too much from the intended resolution. Especially mobile devices will see devastating results; you counter these with #media queries to adjust your layout to other screen resolutions.
You should also try to find a site that does what you want to do, and see how they did it (inspect HTML, CSS, and maybe Javascript).
At this fiddle, you can see a header-bar with a title on the left and some text on the right. The problem should be obvious,
the header-bar does not scale with the full site, only with the visible part
The right-floated text sticks to the top of the header and is not on the same baseline as the title.
How can I fix this? Is there a better way to achieve what I want to do?
Clarification: With "the header does not scale" I mean that it does not have a width of 750px as defined in #header because the page is too small.
A few things:
No need for a float-clearing element. Just add overflow: auto; to the container.
Use max-width instead of width, as it scales nicely.
Try this: http://jsfiddle.net/PkkU8/7/
For 1) As Blender has mentioned, setting max-width: 750px should give you the flexible header width that you are looking for. This way, your header will never be larger than 750px, but can shrink if the window gets smaller than that size.
For 2) If you aren't adverse to it, you can absolutely position the right block instead of floating it. You'd be less prone to issues that float may cause, especially when you can guarantee the right block is going to be smaller than the header itself:
.fr {
position: absolute;
bottom: 0;
right: 0;
}
This also requires that its parent div be positioned either absolutely or relatively to work properly:
#head {
position: relative;
}
add padding to class fr
.fr {
float: right;
padding: 9px 60px 0 0;
}