Trying to get a specific layout in HTML with CSS - html

This is my scenario:
I have a fixed-positioned DIV element (lets call it 'wrap'). It must not overflow the margins of 100px from the window's edges.
Inside this div reside 3 other DIVs ('first', 'second', and 'third').
Only the 'third' DIV has a fixed height and should always be positioned at the bottom of the containing 'wrap' DIV.
The issue is that I want the 'wrap' DIV to occupy as less possible height of the screen. I want it to shrink its height if 'first' and 'second' are fully shown, and scroll 'second' if they don't.
I find it kind of hard to explain, so I hope you can get the idea.
Ask me anything if you need any clarifications.
I've created a pen for it on CodePen that you can fork and play with.
I can't succeed in achieving this without JS.
I'll really appreciate your help...
Thanks.

You can create custom styles for varying screen sizes using #media in your style sheet like
#media screen and (max-width: 800px) {
#wrapper {
width: 90%;
min-width: 0;
}
#column-main {
margin-left: 0;
}
#column-sidebar {
width: auto;
float: none;
}
}
Visit here for a better explanation.

Related

automatically decrease container width while resizing broswer window

I am using CSS and HTML trying to reproduce the homepage of this website http://www.newsweek.com/ as an exercise.
If you open the page with a large screen you will see at both sides two empty columns that gradually decreases as the broswer width is reduced.
I want to reproduce this behaviour but can't make it until the end: I have set a container class with initial width 80% that become 100% at some point thanks to media query in CSS:
#media screen and (max-width: 1047px) {
.container {
width:100%;}}
What I miss is the gradually reduction of this container. How it can be made?
Thank you very much
For an experience like that, all you need is something like this:
.container {
max-width: 1200px;
margin-right: auto;
margin-left: auto;
}
If .container is applied to a block level element (like <div>) then this element naturally goes to be as wide as it can. This just says don't go wider than 1200px, and designate the left over space equally between the left and the right.
If for some reason the element is not block level (e.g. a <span>) then simply add display: block; to the above code to make it block level.

Use media query to order div elements vertically when page gets smaller

I am designing a component for a website which is one solid inline block. It currently looks fine on a normal sized screen but when the screen gets smaller things get weird. I have tried using a media query to change some of the CSS properties to get all the divs to fall in line vertically. This doesn't seem to be working.
Also, there is an extra 10px on the bottom of this block which I have tried to remove in numerous ways and it doesn't disappear unless I set the height a solid 300px on the larger outer div. Right now I am trying to use the calc function to remove it but with no luck. If someone knows the fix to that too it would be awesome.
Here is the current media query:
#media (max-width: 500px){
#orange-block-right, #orange-picture{
float: left;
display: inline;
}}
Here is the link to the jsfiddle which will demonstrate my woes. If anyone could let me know what the issue is I would be very appreciative.
First of all you need to reset your left margin and width in the media query:
#orange-block-right {
width: 100%;
margin-left: 0;
}
Similar for the other elements.
Apart from that, erase those float and inline properties, define all these elements as blocks and center their content.

Div not resizing even with clear or overflow

I have 2 boxes (About Us and Contact Us) that don't change (stack) when you resize the browser. I've checked the forums and it looks like I need either a clear:both or overflow:hidden. My problem is, I've tried both of those anywhere I can think of and nothing happens.
So far, I've tried overflow in the wrapper, box1 and box2. As well as paragraphs 1-3. I've also tried clear in pretty much every spot around/in/under the wrapper div in my HTML.
When the browser reaches the 768px breakpoint, you need to change the div's display mode to block so that it doesn't allow any other item in its horizontal space.
#media (max-width: 768px) {
#box1 {
display: block;
width: 60%; /* Set according to your requirement */
}
}
Output:
JSbin

How can I make a div element "float" up when resizing the browser window using css and html?

I have been trying to figure this out, but am unable. I am looking for a way (through coding html/css) to "float" a div element up as the browser window's width is decreased.
Here is the browser window at full width with the div elements side by side.
After resizing (decreasing browser window width), I'd like for the 2nd div element to "float" above the 1st div element.
I would appreciate any help. Thank you.
UPDATE: First, thank you all for the help. After reading/trying recommendations, I am looking for a solution that is functional across all browsers. Also, the elements will be dynamic images. And, it doesn't have to be strictly limited to html/css, but the most simplistic implementation is always appreciated! :) Thank you again for your input and help.
Just place the second div first in your code like this:
<div id="second"></div>
<div id="first"></div>
And add float: left; attribute to the first div with CSS. You won't need jQuery for that:
http://jsbin.com/ERutocO/1/
You need to put number 2 in front of number 1 in your html code, then use float: right on both of them.
http://jsfiddle.net/4sCrQ/
If you want only CSS answer then you will need to use CSS3's media queries which word depending on the screen type and its size!
Use this :
#media only screen and (max-width: 900px;) { // screen size 900px
// if screen size 900px then position them here as
.div1 { // first div
margin: 10%; // margin
}
.div2 { // second div
// whatever property
}
}
And when the size decreases to lets say 500px width then
#media only screen and (max-width: 500px) { // if screen size is 500px
.div1 { // first div
// position it above,
}
.div2 { // second div!
// position it below by using min-width attr, and by adding paddings..
}
}
Good luck!
For more: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries (Mozilla Developer's Network)
Float the blue div left, the yellow div right. Demo
#yellow {
float: right;
height: 30px;
width: 200px;
background: yellow;
}
#blue {
float: left;
height: 30px;
width: 200px;
background: blue;
}
Here is a demo
While making this example some answers where posted here, and they are almost simular to my, so excuse me for duplication, but here is another possible solution.
I've reorder the div's and add float: right; instead of left.

How to center content in a div in responsive skeleton?

There are similar questions to this but none of them are solving this problem.
I have built my site using a skeleton framework (http://www.getskeleton.com). For some reason, when i try to apply padding or any margin greater than 5px to the content in the main div on the site, the text portion jumps below the image. I've tried using their "offset-by" classes but the same thing happens. I've tried using
margin:0 auto; on all divs in that section but to no avail. I've also tried using text-align:center; but that didn't work either (oddly, this only centers the h1 element in that section but nothing else...).
The other issue I'm having is that I want all the backgrounds to expand to fit the width of the browser window and all the content should remain in the center but that doesn't seem to work well with this layout. If I set the container div's width to 100% it does expand but I end up having to set all the column and offset-by classes to 100% as well and then that messes up the navigation, etc. I want to keep my layout how I have it now but I just want the backgrounds to expand (including footer height) and for all content to be centered.
Here is the screenshot of what it looks like in the browser: http://i.imgur.com/K3LAshv.png
Can anyone please take a look at the code and let me know what I should fix here? I've added my code on JSFiddle:http://jsfiddle.net/z9uVK/
Many thanks in advance!!
The skeleton is confusing the hell out of me, there is just so much going on... so I eliminated all CSS and added a few simple rules demonstrating the techniques I would use to code this behavior from scratch
Since you want the background color bands to extend beyond the container, I am setting the container to 100% and placing extra divs around each of header, main and footer. These have width 100% also. The width of #header, #main, footer is set to 960px by default and reduced with a media query. I have also set the columns and the headshot image to use percents instead of pixels. I also removed a couple inline style rules from the HTML because they were breaking this new code.
http://jsfiddle.net/W7wG3/1/
// part of my css:
.container{width:100%;}
#headerBin{
background-color: white;
border-top: 15px solid #4d4d4d;
}
#header, footer, #main{
width: 960px;
margin:auto;
}
#media only screen and (min-width: 768px) and (max-width: 959px) {
#header, footer, #main{
width: 768px;
margin:auto;
}
}