So there are a lot of questions like this on StackOverflow but there doesn't seem to be one that will be helpful in my case.
As you can see, I have 2 divs on the screen. One on the left which is
float:left;
and the one in the middle is
margin-left-auto;
margin-right:auto;
So my question is, when I want to put another div JUST like the one on the right on the left of the middle DIV, how will I go on to doing this?
float:right;
has been tried on the right div but that just puts it in a different line because of the left div being floated.
So how do I do this? Answers are greatly appreciated.
I can provide more code such as how the DIV"s are arranged if needed.
All I did was type
display: flex;
in the container div and it worked perfectly.
To create a main body of content with a left and right sidebar, you can float:left and simply define a width for each div in the CSS.
ie:
.div1 {width:25%}
.div2 {width:50%}
.div3 {width:25%}
If you want to account for padding, just reduce the amount divided by three on each div width.
ie: http://jsfiddle.net/simsketch/9tj4va6r/
It might help you to start out using a framework like Foundation or Bootstrap.
Foundation provides lots of starter templates to help get you started here.
http://foundation.zurb.com/templates.html
When using a grid system, instead of needing to define widths in your custom css, you can simply include the foundation.css library, and reference the classes.
ie: <div class="large-6">content</div>
For the layout you're after, this would do the trick.
http://foundation.zurb.com/templates/feed.html
What they're doing there is simply:
<div class="large-3"></div>
<div class="large-6"></div>
<div class="large-3"></div>
As long as the numbers add up to twelve, they will fit perfectly.
This has been a brief introduction to grid systems. Consult the following for more information:
http://foundation.zurb.com/
http://getbootstrap.com/
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
These are the two most popular front-end frameworks but there are dozens more and they are all wonderful.
Flexbox solution
Wrap the items inside a parent container and set the display: flex
flex: 1 on the left and right items will grow and shrink it 1x.
flex: 2 on the middle items will grow and shrink it 2x.
.container {
display: flex;
}
.left,
.right {
flex: 1;
text-align: center;
background: #E77F24;
}
.middle {
flex: 2;
text-align: center;
background: lightblue;
margin: 0 10px;
}
<div class="container">
<div class="left">1</div>
<div class="middle">2</div>
<div class="right">3</div>
</div>
.div1{
width:25%;
overflow:auto;
float:left;
background-color:blue;
color:white;
text-align:center;
}
.div2{
width:50%;
overflow:auto;
float:left;
background-color:red;
color:white;
text-align:center;
}
.div3{
width:25%;
overflow:auto;
float:left;
background-color:green;
color:white;
text-align:center;
}
<body>
<div class="div1">First Div</div>
<div class="div2">Second Div</div>
<div class="div3">Third Div</div>
</body>
Related
I'm working on a little CSS/HTML project and I'm running into a wall. Hoping I can get some help here. Here is a link to the UI I'm working on: http://imgur.com/a/yKXk9
What I'm trying to do is have that Projects header sticky to the top of that container div, and have all the items scroll beneath it without overlapping with the header.
This is the CSS I have for my container:
.projectContainer {
background-color: rgba(0, 0, 0, 0.15);
width: 30%;
height: 50%;
border-radius: 2em !important;
margin: 1em;
overflow-y: auto;
position: relative;
}
And this is the CSS I have for the header.
.projectHeader {
position: absolute;
padding-left: 35%;
top: 0;
height: 1.5em;
}
EDIT: I also added a bit of the HTML I'm using:
<div class = "projectContainer">
<div class="name projectHeader">Projects</div>
<div class="projectThumbnail">
<a href="http://lunchline.herokuapp.com" target="_blank">
<i class="fa fa-cutlery fa-3x"></i>
<p>LunchLine</p>
</a>
</div>
MORE PROJECT THUMBNAILS HERE
</div>
This obviously doesn't work as the header scrolls just like everything else. I tried using position: sticky on the header, and the problem with that was that all the content scrolled BENEATH the header text instead of neatly ending at the bottom of the header div. If anyone can guide me in the right direction I'd be very grateful.
Also, as a sidenote: is there a way to get rid of that gotdawful scrollbar and just have the thumb appear (and only appear when I'm actually scrolling)?
Thanks everyone.
EDIT:
Here is a JS Fiddle. https://jsfiddle.net/ksy6ahL0/
I tried stripping it down to just the container and stuff so it looks messy but I think it basically shows what I'm trying to do.
I think your biggest problem is that you put the overflow on the main div, not on the content div.
.container{
background:gray;
color:white;
width:400px;
height:400px;
display:flex;
flex-direction:column;
}
.content{
flex:1;
overflow:auto;
}
<div class="container">
<h1 class="header">header</h1>
<div class="content">content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br></div>
</div>
the right Div on my html-page contains only some rows of thumnails - created dynamically in javascript - while the left Div contains 3 Sub-Divs (inner Divs) arranged vertically (also dynamically created on receiving my query-result from my webService)
In order to make it look balanced I want the
left Div to automatically adjust to the same height
as the right one (which holds the dynamically inserted thumbnails).
The 3 vertical aligned Sub-Divs in the left Div should behave like this:
Div2 with the larger Image should be vertically centered
Div1 with the header text should be vertically centered in the space above Div2
Div3 with the title text should be vertically centered in the space below Div2
.
question:
is this possible with css ?
- i.e. without calculation of the heights on dynamic creation in javascript
.
if this is possible with css
then, please, give me some hints
about which float, display, align, margin (and similar) settings
I could try for the left Container Div and for its 3 inner Divs.
I do not need to get a sample or a solution resp.
but I need some hints in plain words, some ideas
that I could try out,
and some considerations (tipps) which I should obey.
many thanks in advance.
Flexbox can do what you need:
jsfiddle: https://jsfiddle.net/ornx7oar/
.main {
display: flex;
}
.left-panel {
padding: 5px; margin-right: 5px;
background-color: green;
/*width: 30%;*/
flex: 0 0 30%; /* don't grow or shrink based on contents, 30% width (put auto if you prefer to use the width property) */
display: flex;
flex-direction: column; /* align vertically */
justify-content: space-around; /* center vertically */
}
.right-panel {}
.thumb {height: 70px; width: 150px; border: 1px solid; display: inline-block;}
* { box-sizing: border-box; margin: 0; }
<div class="main">
<div class="left-panel">
<div>first</div>
<div>second</div>
<div>third</div>
</div>
<div class="right-panel">
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
</div>
</div>
I would add the same class to all three divs. In your css, add margin: 10px auto; Depending on the current code you might need to add position: relative to this class as well.
You can tweak the 10px part depending on how far apart you want them. The auto centers the divs to its parent.
As far as changing the order look at w3 schools documentation on order
Should be simple but I can't work it out.
I have two panes on my webpage. I want both to be independently scrollable:
<body>
<div id="sidebar"> ... lots of content ... </div>
<div id="container"> ... lots of content ... </div>
</body>
#sidebar{
width:200px;
position:fixed;
overflow:scroll;
background-color:black;
color:white;
top:0;
left:0;
height:100%;
}
Here is a JSFiddle. Notice how when you scroll to the bottom in the black sidebar, and keep scrolling, the body starts to scroll? That's what I want to avoid. Is there a simple way to achieve this?
Please try following updated CSS. Here I have set 200px height after that it will add scroll bar for #sidebar div.
#sidebar{
width:200px;
position:fixed;
overflow:auto;
background-color:black;
color:white;
top:0;
left:0;
height:200px;
}
Hope it may help.!!
body {
overflow-y : hidden
}
helps you if you don't want body to be scrolled.
This is working if I understood your problem correctly. Just making overflow:hidden when mouse is over sidebar div.
#sidebar:hover + #container{
overflow-y: hidden;
height: some_value; // your window height
}
You´re right. In Chrome it happens.
Maybe some jQuery?
$("#sidebar").focus(function(){
$('body').css("overflowY","hidden");
});
$("#sidebar").blur(function(){
$('body').css("overflowY","scroll");
});
Add tabindex="-1" to sidebar to get this working
Actually Working
I'm trying to make a page that contains 3 elements: Header, footer and content. As the names suggest, I want the header stuck to the top, the footer in the bottom, and the content in between. I have already made a layout, which puts the header and footer where they are supposed to be, but the content either overlaps them, or the other way around, where the content is supposed to get smaller instead.
My problem is that the header and footer are going to be used for many different things, and they are therefore dynamic when it comes to height.
Is there any way to make the content fill what space is left between the header and footer, without overlapping any of them?
If possible I would prefer pure CSS, but if that isn't possible, I'd like a JavaScript suggestion as well. :)
Thanks!
EDIT: This is what I got atm.
<div class="container">
<div id="header"></div>
<div id="footer"></div>
<div id="content"></div>
</div>
CSS:
#content {
position:absolute;
background: url('img/textures/fabric.png');
background-color: gray;
height:auto;
width:auto;
margin:0 auto 0 48px; /* Center content */
left:0;
right:0;
top:0;
bottom:0;
text-align:center;
}
#dashtop {
position:fixed;
width:auto;
background-color:aqua;
opacity: .5;
margin-left: 48px;
top:0;
left:0;
right:0;
text-align:center;
}
#footer {
position: fixed;
margin-left: 48px;
background-color:green;
bottom:0;
right:0;
left:0;
width:auto;
height:auto;
text-align:center;
opacity:0.5;
z-index:0;
}
Use relative positioning both for header and content (no position attribute), and use fixed positioning for the footer.
I currently have a grid made out of square DIVs (200px x 200px each).
I have started in the top left hand corner and floated each one left so that the 2nd one is to the right of the first and the the third to the right of that and so on. When it runs out of horizontal space in it's container the next square automatically starts a new row, obviously.
This is great if you want the grid to keep getting longer vertically each time a row fills up, but I want mine to be three squares high and grow to the right hand side, so the first square goes in the top left, the 2nd underneath it, the third underneath that, then (because the container is 600px high) the 4th square should start a new column and go to the right of the first.
Is it possible to achieve this for an unspecified number of squares so it just keeps growing into new columns without resorting to javascript?
IE6 support is not necessary.
Any help would really be appreciated.
You can try CSS 3's multi columns http://www.w3.org/TR/css3-multicol/ , http://www.css3.info/preview/multi-column-layout/
Using properties like
-moz-column-width: 5em;
-webkit-column-width: 5em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
http://jsfiddle.net/Txgnk/1/
Looks like IE 10 is the first IE to support it http://caniuse.com/multicolumn
Try this,
<style>
.parent {
height:600px;
white-space: nowrap;
}
.child {
width: 200px;
height: 600px;
display:inline-block;
}
.grand-child {
width: 200px;
height: 200px;
border: 1px solid;
}
</style>
<div class="parent">
<div class="child">
<div class="grand-child"></div>
<div class="grand-child"></div>
<div class="grand-child"></div>
</div>
<div class="child">
<div class="grand-child"></div>
<div class="grand-child"></div>
<div class="grand-child"></div>
</div>
...
...
</div>