How can I properly position the 'portfolio' section so that it doesn't go behind 'contact' section and that it stretches and shrinks depending on the size of the screen (just like the photo backgrounds)??? Can it be done with CSS and percantages only??? I tried many different combinations but w/o success.
The height of each section is always 100%. So is the width.
http://jsfiddle.net/zwwve/9/
<section id="home" class="photobg">
<div class="inner">
<div class="copy">
<h1>Home</h1>
<p>Some text here!</p>
</div>
</div>
</section>
Here is a rough idea: http://jsfiddle.net/derekstory/zwwve/17/
For unhiding the portfolio section, put a div wrap around it. No CSS for the wrap required.
For the scaling, you will want to remove the gallery width. Maybe put a min-width.
.gallery {
min-width: 500px;
margin-left: auto;
margin-right: auto;
}
For the portfolio hovers, you can also give them a percentage and a min-width.
.project {
display: inline;
float: left;
height: auto;
position: relative;
width: 20%;
min-width: 120px;
margin-top: 40px;
margin-left: 40px;
margin-right: 20px;
}
Its rough, but the basic idea.
You had a fixed width for the .gallery class which I changed to 100%, now the projects fall underneath each other as the screen size decreases.
I also changed the position and bottom of the contact div so it can be at the bottom.
JSFIDDLE
Added/Changed CSS:
.gallery {
width: 100%;
margin-left: auto;
margin-right: auto;
}
#contact{
position: relative;
top: 1000px;
}
Related
Desired Outcome:
Further Details:
Right now I am setting the Div height based on estimates (ie. 10% for search bar, 60% for middle and 30% for bottom) and set the thumbnail size to fit well on my Samsung Phone. The problem is that on different phones, the width is different and Div3 ends up with large borders. To complicate matters, Div2 can scroll up/down (minor problem) but Div3 can scroll left/right (moderate problem).
All thumbnail images are guaranteed to be 16:9 (I believe) as they are obtained from here https://img.youtube.com/vi/NJ2YyejQjpw/maxresdefault.jpg
I'm having conceptual issues trying to size a div (Div3) based on the height generated when an image is stretched the (more or less) the screen width)
Question:
How can I get the three below divs, while allowing for (1) vertical scrolling in Div2 and (2) horizontal scrolling in Div3
Code:
JSFiddle code. Try on iPhone X, it looks weird
Important sections:
#search_bar {
width: 100%;
height: 10%;
border: 0px;
float: right;
padding:0px;
position: relative;
background-color:red;
}
#search_results {
width: 100%;
height: 58%;
padding:4px;
float: right;
overflow:auto;
background-color:green;
}
#playlist_reel {
width: 100%;
height: 32%;
padding:4px;
clear: both;
overflow-x: auto;
white-space: nowrap;
background-color:blue;
}
I went off the diagrams you included and tried to replicate a simple version of it.
Use flexbox for column layout
Have #search_results take up as much space as possible
Have #search_barand #playlist_reel take up only the space they occupy (totally adjustable)
Use a background-image for #search_results so the element is always covered.
Use a static img in .bottom so that it takes up actual DOM space
As for scrolling, the requirement feels a little broad at the time I am posting this. Maybe this demo will get you close enough to experiment with scrolling on your own.
Note: This demo is more easily viewed in either "full page" mode (here in SO) or in the jsFiddle.
html, body { margin: 0; }
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
width: 380px;
max-width: 100%;
margin: 0 auto;
}
#search_bar [type=search] {
width: 100%;
padding: 1em;
font-size: 1.25rem;
}
#search_results {
flex-grow: 1;
background-image: url('http://placekitten.com/400/500');
background-size: cover;
}
img {
max-width: 100%;
height: auto;
}
<div class="container">
<div id="search_bar">
<input placeholder="Search" type="search">
</div>
<div id="search_results"></div>
<div id="playlist_reel">
<img src="http://placekitten.com/400/50" alt="">
</div>
</div>
jsFiddle
I'm working on my portfolio site and having trouble getting my divs to size together.
Here it is: I have one body div, inside there are two child divs.
The body div should have max-height 100%, max-width: 100% so that it doesn't exceed the browser window.
The left div contains an image which I want to scale to the parent body div (max-height 100%, max-width 70%).
The right div contains text about the image, it needs to scale to the height of the left div (there is also footer that sits at the bottom of this div).
This shouldn't be so hard, its almost working but right now my image container (left div) is not being contained to the body div.
html,
body {
height: 100%;
}
.Info {
float: left;
width: 25%;
padding-left: 15px;
padding-top: 10px;
/*margin-left: 78%;*/
border-left: 1px black solid;
/*position: absolute;*/
}
.InfoText p {
margin-top: -10px;
}
div img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
box-shadow: 5px 5px 15px #888888;
}
.ImageContainer {
float: left;
height: 100%;
max-width: 70%;
padding-right: 15px;
position: relative
}
section.ImageContainer img {
float: left;
object-fit: cover;
}
#SideQuote {
margin-top: 30px;
}
.StuffInBody {
position: relative;
padding-top: 15px;
float: left;
display: flex;
}
footer p {
position: absolute;
bottom: 0%;
margin: 0;
}
<div class="StuffInBody">
<div class="ImageContainer">
<img class="contained" src="images/TheGMODebate copy.jpg" alt="" />
</div>
<div class="Info">
<div class="InfoText">
<p>ILLUSTRATION</p>
<p>Title: <em>The GMO Debate</em>
</p>
<p>Media: Gouache</p>
<div id="SideQuote">
<p class="ClickToEnlarge">Full screen image click here.
</p>
</div>
<footer>
<p>© Brooke Weiland 2015</p>
</footer>
</div>
</div>
</div>
It's very hard to make a reliable interface using floats.
It changes default behaviour and put your element outside of the flux.
You should be able to do what you want using only flex.
The property box-sizing: border-box also makes miracles (margin and padding easier to manage).
Also, the object-fit property is not enough supported by browsers to be used now IMHO.
http://caniuse.com/#feat=object-fit
I set a width & height to the parent images div. There are two child divs inside of it called image_one and image_two with a set width. The problem is that when I reduce the width of the viewport, the image_two div escapes the parent div and comes under the image_one div. How do I keep this div from escaping? I figured that setting a percentage width would automatically resize the div to stay inside of the parent div. When I set an overflow:hidden, both of the divs disappear.
Here is a link to the code:
http://codepen.io/matosmtz/pen/ZGpNmy
<div class="images">
<div class="image_one">
<p style="background-color:red; text-align:center">Photo</p>
</div>
<div class="image_two">
<p style="background-color:red; text-align:center">Photo</p>
</div>
</div>
.images {
padding: 0;
margin: 0;
width: 100%;
height: 220px;
}
.image_one {
width: 30%;
height: 200px;
position: relative;
background-color: black;
padding: 5px;
float: left;
margin: 5px;
}
.image_two {
width: 30%;
height: 200px;
position: relative;
background-color: black;
padding: 5px;
float: left;
margin: 5px;
}
The .images div is 100% width. This includes the sidebar on your codepen.
The child divs are 30%, but this means 30% of the whole space. So when you reduce the size of the browser, eventually they are big enough to need to slide under one another, because your .sidebar has a fixed width of 200px.
I would suggest having a look at how the Bootstrap CSS works in order to find your fix for this, or straight out using that.
I feel this question has been answered but I searched and searched and no answer seems to deal with dynamic main content width.
I simply want this scenario:
|-|nav|-|main content|-|
Where nav is a DIV and main content is a DIV and both are placed inside another DIV container which has a width of 100%. - is simpy a spacing between the DIVs, a margin.
nav has a fixed width of 300px and "main content" div should always take the rest of the space available (to fill the 100% of the parent div) - without the use of JavaScript.
Also I want to have some margins left and right of each DIV (nav, main content) so that they have some space between them and the "browser border"/body.
I experimented with table, table-cell but the border-collapsing drove me nuts so I am heading back to god old "float: left" and clearfix. This is what I have so far:
<div id="container" class="cf">
<div id="nav">
Nav stuff
</div>
<div id="main">
Main stuff
</div>
</div>
#container {
padding: 0;
width: 100%;
background-color: orange;
min-height: 50px;
}
#nav {
display: inline;
float: left;
min-width: 300px;
width: 300px;
margin-left: 10px;
margin-right: 10px;
}
#main {
display: inline;
float: left;
background-color: green;
margin-right: 10px;
}
.. /* clearfix stuff omitted (class 'cf') */
So now the problem is, how to make "main content" (#main) fill the rest of the parent (#container). If I use a width of 100% the 100% is of course the full width of the parent and the div will go under the "nav" div. If i use "auto" the same thing happens. It of course works if I pass in a fixed width e.g. in pixels but I don't know the correct pixels in advance and using JS to calculate that seems a bit odd to me.
I've seen a solution where the "nav" was put inside "main" but that leads to problems with the margins. Try to insert a margin to create some space beside a div that is inside another div... I don't think that's anyhow possible in this universe.
Thanks for your help!
Maybe you should create BFC to face this problem.
For example:
#container{
border: 1px solid red;
}
#nav{
float: left;
width: 300px;
border: 1px solid green;
height: 200px;
margin-left: 20px;
margin-right: 20px;
}
#main{
overflow: hidden;
height: 400px;
border: 1px solid blue;
margin-right: 20px;
}
overflow: hidden; is the key to create BFC for #main.
JSFiddle : http://jsfiddle.net/yujiangshui/yMFB6/
More about BFC : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
For example:
#container {
width: 100%
position: relative;
}
#nav {
position: absolute;
top: 0;
left: 0;
width: 300px;
}
#main {
margin-left: 320px;
}
JSFIDDLE
I have a page that has a header, content, and footer. The header and footer are of fixed height, and I'd like the content to adjust its height so that it fits dynamically between the header and footer. I am planning to put a background-image in my content, so it is critical that it actually fills the rest of the unoccupied vertical space.
I used the Sticky Footer approach to ensure that the footer remains on the bottom of the page. This however does not make the content span the entire height of the remaining space.
I have tried several solutions which involved me adding height:100%, height:auto; position:relative but it did not work.
html,
body {
height: 100%;
background-color: yellow;
}
header {
width: 100%;
height: 150px;
background-color: blue;
}
header nav ul li {
display: inline;
padding: 0 30px 0 0;
float: left;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 0 -30px 0;
/* the bottom margin is the negative value of the footer's height */
position: relative;
}
#wrapper #content {
background-color: pink;
width: 400px;
height: 100%;
margin: 0 0 -30px 100px;
padding: 25px 30px 25px 30px;
}
footer {
margin: -30px 0 0 0;
width: 100%;
height: 30px;
background-color: green;
}
<div id="wrapper">
<header>
<div id="logo"></div>
<nav>
<ul>
<li>About</li>
<li>Menu</li>
<li>Specials</li>
</ul>
</nav>
</header>
<div id="content">
content
<br>goes
<br>here
</div>
</div>
<footer>footer</footer>
The trick about height:100% is that it requires all of the parent containers to be have their heights set as well. Here's an html example
<html>
<body>
<div id="container">
</div>
</body>
</html>
in order for the container div with a height set to 100% to expand dynamically to the height of the window you need to make sure that the body and html elements have their heights set to 100% as well. so...
html
{
height: 100%;
}
body
{
height: 100%;
}
#container
{
height: 100%;
}
would give you a container that expands to fit your window. then if you need to have footer or header that floats above this window you can do so with z indexing. This is the only solution I've found that fills the vertical height dynamically.
I'm providing a slightly more general solution so it is more useful for others reading this answer and wondering how to apply it to their site.
Assuming you have three divs:
<div id='header'></div>
<div id='contents'></div>
<div id='footer'></div>
where #header is fixed and may have variable height, #contents should consume all remaining vertical space and #footer is fixed and may have variable height you can do:
/* Note you could add a container div instead of using the body */
body {
display: flex;
flex-direction: column;
}
#header {
flex: none;
}
#contents {
flex: 1;
height: 100%;
overflow-y: scroll;
}
#footer {
flex: none;
}
Note that this will allow the contents to scroll vertically to show it's whole contents.
You can read more about display:flex here.
Try changing your css to this:
html,
body {
height: 100%;
background-color: yellow;
}
header {
width: 100%;
height: 150px;
background-color: blue;
}
header nav ul li {
display: inline;
padding: 0 30px 0 0;
float: left;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 0 -30px 0;
/* the bottom margin is the negative value of the footer's height */
position: relative;
}
#content {
background-color: pink;
width: 400px;
padding: 25px 30px 25px 30px;
position: absolute;
bottom: 30px;
top: 150px;
margin-left: 100px;
}
footer {
margin: -30px 0 0 0;
width: 100%;
height: 30px;
background-color: green;
}
<div id="wrapper">
<header>
<div id="logo"></div>
<nav>
<ul>
<li>About</li>
<li>Menu</li>
<li>Specials</li>
</ul>
</nav>
</header>
<div id="content">
content
<br>goes
<br>here
</div>
</div>
<footer>footer</footer>
You probably don't want to be setting the width, padding, margins, ect. of the wrapper. Also, with absolute positioning you can pull the bottom and top of the content to where you want them.
Here's what you are after, I think.
I spend several hours trying to figure this out too and finally have a robust solution without hacks. However, it requires CSS3, which requires a modern browser to support it. So, if this constraint works for you, then I have a real solution for you that works.
http://jsfiddle.net/u9xh4z74/
Copy this code into your own file if you need proof, as the JSFiddle will not actually render the flexbox correctly as embedded code.
Basically, you need to
- set the target container to 100% height, which you seem to already know
- the parent container you set display: flex and flex-direction: vertical (you'll see in the JSFiddle I've also included the alternate styles that do the same thing but are needed for cross browser support)
- you can let the header and footer be their natural heights and dont need to specify anything in that regard
- in the container you want to fill up the remaining space, set flex: 1. You're set! You'll see it works exactly as you semantically have intended. Also in the JSFiddle, I included overflow: auto to demonstrate that if you have even more text than the screen can handle, scrolling works as you would want it to.
<div style="display:flex; flex-direction:vertical;">
...header(s)...
<div style="flex: 1; overflow: auto;">
As much content as you want.
</div>
...footer(s)...
</div>
As a side note, I pursued the option of trying to do this same thing using display: table. It works just fine as well, except that overflowed content does not work as you would expect, instead overflowed content simply expands the container to the size of the content, which I'm pretty sure is not what you want. Enjoy!
Use display:table and display:table-row
Set height:0 for normal divs and height:auto for div that should fill vertical space. Insert a div with {height:100%; overflow-y:auto} into the vertical filler to if the containers height shouldn't expand beyond its preset height.
Behold the power of display:table!
<div style="height:300px;">
<div style="display:table; height:100%; width:100%;border: 1px solid blue;">
<div style="display: table-row; height:0; padding:2px; background-color:yellow;">
Hello
</div>
<div style="display: table-row; height:auto; padding:2px; background-color:green;">
<div style="height:100%; overflow: auto;">
<div style="height: 500px"></div>
</div>
</div>
<div style="display: table-row; height:0; padding:2px; background-color:yellow;">
Gbai
</div>
</div>
</div>
There is no 100% height from 100% continer height exactly. You can't solve it this way. Likewise while using mix of height + margin + padding. This is way straight to hell. I suggest you to take a look for tutorials which are sloving this page layout.