I'm trying to get two divs to appear side by side as follows:
First div is displayed on the left float: left and takes up as much space as it needs.
Second div appears on the right float: right and takes the remaining space.
The issue is that I do not have a set width for any of those divs so they just take up as much space as they can: jsFiddle
I have found several solutions but all of them required setting width for one of the divs which is what I'm trying to avoid. Any possible solution?
#left, #right { display: table-cell; }
#left { white-space: nowrap; }
http://jsfiddle.net/CoryDanielson/LzREv/5/
Related
Looking at the bottom example here, if you give .after-box a margin-top:5px it doesn't make a difference as it'll stay in the same location. But if you give .box a margin-bottom:5px it'll move the .after-box down. Why is it that on floated elements, their margin matters but other elements around them don't?
Hey margins don't move floated html elements, instead they push it away.
To give a fake margins on floated elements is to put the content inside another container then apply padding.
.outer {
float: left;
padding: 20px;
}
.inner {
//styles here..
}
So basically, I want two divs to sit inside another div. The first one is sitting inside with no issues, but the second one floats underneath the parent. When I add overflow:hidden I can't see the div anymore. The closest I've gotten to a solution was to add overflow:auto, but that just creates a scroll bar. I have tried resizing, different positioning, overflow and clearfix but so far I can't find a solution. Any ideas guys? JSFiddle demo here http://jsfiddle.net/QLbGc/ Thanks for any help, it's been annoying me for a couple of days now.
You forgot to put float:left; at the slideshow div
It should be
#slideshow {
background-color: #000;
margin: 15px;
height: 95%;
width: 60%;
-moz-border-radius: 15px;
border-radius: 15px;
float: left;
}
So now you have the 'slideshow' div floating left and 'about' div floating right and they can fit inside the parent div.
Basically they were inside the parent div from the first time but the about div was under slideshow div.
Demo:
http://jsfiddle.net/QLbGc/2/
If you're looking to have the two divs side by side here's a fiddle for that.
http://jsfiddle.net/Hastig/QLbGc/6/
I stripped out a bunch of stuff as I wasn't sure you needed it or it was just stuff you were throwing at it to try and affect change.
Somebody mentioned you were missing a float: left; in what we assume you wanted as your left div.
Remember to compensate for margin and padding to match the container div.
In my example the main container was 500px wide. If I set each float div to 250px width when added to the 20px combined margins on those divs the total width goes to 520px and pushes that right div under the left div so you'll want each floated div at 240px to compensate. Same deal with percentages.
If I misundestood your intention and you're looking to hide one of those div use display: none; on it and double the width of the one you want to show.
try to put this code in your css.
.content::-webkit-scrollbar {
display: none;
}
With CSS, how can i simply get a page with sticky header and footer which are appearing forever, whenever the page is scrolling or not. I found some sample online, but what i additional want is, the middle content area should be a 100% stretched area between header and footer whatever the browser size is.
I mean, most of the Samples i found, are making Header and Footer sticky correctly.., but these are just floating and actually covering the Top and Bottom parts of the 'middle' content area. That's not what i really want.
Can use absolute position for all 3 elements.
#header,#footer,#content { position:absolute; right:0;left:0}
#header{
height:100px; top:0;
}
#footer{
height:100px; bottom:0;
}
#content{
top:100px;
bottom:100px;
overflow:hidden; /* use this if don't want any window scrollbars and use an inner element for scrolling*/
}
DEMO: http://jsfiddle.net/RkX8B/
The solutions presented above work for very simple layout with no border, margin, and/or padding. Many, many solutions that you'll find on the Net will work for this.
However, almost all solutions fall completely apart if you simply add border, margin, and/or padding to any or all of your Divs.
Flex Boxes (CSS display:flex;) are incredibly powerful for this, and they work perfectly with any combination of border, margin, and/or padding.
They can portion your screen space into as many Divs as you need, using fixed size, percentage size, or "whatever's left" for each inner Div. These can be in any order, so you aren't limited to just headers and/or footers. They can also be used horizontally instead of vertically, and can next.
So you could have, say, a fixed-size header, a 20% footer, and a "whatever's left" client area between them that sizes dynamically. Inside that client area, in turn, you could have, say, a percentage-width menu bar at the left edge of the client area, a fixed-width vertical divider next to that, and a client area that takes up "whatever's left" to the right of that.
Here's a Fiddle to demonstrate all of this. The relevant CSS is remarkably simple.
CSS Flex Box (display:flex;) Demonstration with Borders/Margin/Padding
For instance, here are two CSS classes that create containers that will flow their contained Divs either horizontally or vertically, respectively:
.HorFlexContainer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 1; /* this essentially means "use all parent's inner width */
}
.VertFlexContainer {
display: flex;
flex-direction: column;
flex-wrap: wrap;
flex: 1; /* this essentially means "use all parent's inner height */
}
The Fiddle above really shows it all off, though.
For reference, see this excellent article by Chris Coyier:
Flexbox Tutorial
Hope this all helps!
You're probably looking for the "position: fixed;" property, and setting the header to top: 0; and the footer to bottom: 0; You might also consider some padding to your "content area" to account for that header and footer space...
From the top of my head you would have something like:
header { position: fixed; top: 0; height: 100px; }
footer { position: fixed; bottom: 0; height: 100px; }
#container { padding: 100px 0; }
If you're using some kind of background on your container and want to stretch it, a height: 100%; should do...
I've never found a good way to use this kind of layout though... =\
Consider this JSFiddle: http://jsfiddle.net/GFsgq/5/ (you may have to zoom out a bit).
It shows a layout that I'm trying to achieve. So far it's been going alright, but I've hit a roadblock. I want to position two divs 77px in height side by side of the centered divs. They need to retain width to always touch the edge of the screen and their center div. I'm not sure how to do this with my limited knowledge of CSS, short of adding properties at random.
Her is a picture to help you understand: http://i49.tinypic.com/2ntz34n.png
The blue strips are where I want the divs to be. How do I achieve this?
You need to add this in your CSS:
header:after {
content: "";
display: block;
background-color: blue;
width: 100%;
height: 80px;
}
jsFiddle: http://jsfiddle.net/GFsgq/32/
fullsrcreen result: http://jsfiddle.net/GFsgq/32/embedded/result/
i would add parent div spanning thw dith of the screen with position:relative; and to the two child divs use position:absolute; and position one right:0px; and the other left:0px; I am unsure about how you want to distribute width, if you have any other problems then come back.
It is possible to use position:absolute and left and right on the middle column to set where it ends in relation to the parent div.
However I'd like to be able to have the left side of the center div to start right where the left column ends, and for the left column to be adjustable (based on its content).
This seems like a really basic thing but from what I understand there is no way to do this without flexboxes. Is this true? Is there nothing I could do with clever nesting of semantically superfluous elements and certain styles set to auto?
If the right div has some set width (either in % or px), then yes, you can let the left div's width be defined by its content while letting the center div fill in the remaining space:
#right {
position: absolute; /* position in top right corner */
top: 0;
right: 0;
width: 80px;
}
#center {
margin-right: 80px; /* same as #right width */
}
#left {
float: left;
}
jsFiddle DEMO
From what I can tell you'd be better off with simple floated blocks. If you wanted to absolute position all of them together, you could wrap them in an absolute container, and float them inside. Maybe I just don't understand why you need them absolutely positioned, but this seems like a viable option.