I got the following HTML structure:
<div id="main-container">
<div id="left-column">...</div>
<div id="right-column">...</div>
</div>
My CSS:
#main-container
{
width:80%;
margin:20px auto;
}
#left-column
{
width:400px;
float:left;
}
#right-column
{
width:100%;
float:right;
padding:26px 0 0 0;
}
Very typical layout, nothing fancy. What I cannot understand though is why the right-column instead of taking up the the space it has in the main-container (so 80% of the whole screen minus 400px) it spans the whole main-container and gets pushed below the left-column.
I tried setting it's width to 70% and it's okay until I resize the window, then the right-column overlaps the left one.
Thanks!
Setting the width of the right column to 100% means it is going to take the full width of the container, and not the full width minus other elements within the container.
I suggest you achieve the column by column structure (where one column has a fixed width and the other takes the remaining space) as follows:
#left-column
{
width: 400px;
float: left;
}
#right-column
{
padding: 26px 0 0 0;
margin-left: 410px;
}
Here is an example.
What I cannot understand though is why the right-column instead of
taking up the the space it has in the main-container (so 80% of the
whole screen minus 400px)
This is because width: 100%; is 100% of its containing element (100% of #main-container) - the #right-column does not care about 400px on any sibling element (i.e. #left-column)
Related
I'm sure this is simple but I'm struggling to get my head around it.
I have two divs. A heading div max-width 500px. A main div max-width 400px. The main div should be centered horizontally in the browser window. The left hand edge of the heading div needs to align to the left hand edge of the main div. See below. The red line is the center of the browser window:
I've acheived this by adding a wrapper div with max-width 500px (the pink colour) and using extra padding on the left hand side. This works to a point. But at smaller screen sizes the extra padding on the left knocks the layout off center.
So how do I create this layout? I'm presuming I can not add the heading div as a child of the main div, because a child can't be wider than its parent. I'm guess flexbox might be the answer, but I've never used Flexbox.
This is the code I have so far:
https://jsfiddle.net/aqpyzogc/
<div class="wrapper">
<div class="heading"></div>
<main></main>
</div>
.wrapper {
max-width:500px;
margin:0 auto;
padding:0 0 0 100px;
background-color:lightpink;
}
.heading {
max-width:500px;
background-color:cyan;
height:100px;
}
main {
max-width:400px;
background-color:grey;
height:500px;
}
But at smaller screen sizes the extra padding on the left knocks the layout off center.
You can calculate the correct amount of padding for those viewport sizes, using the calc() function.
Below 600px viewport width, the remaining space is 100% minus 400px, and we need half of that for the padding-left, so:
body {
margin: 0;
}
.wrapper {
max-width: 500px;
margin: 0 auto;
padding: 0 0 0 100px;
background-color: lightpink;
}
#media (max-width: 600px) {
.wrapper {
padding-left: calc((100% - 400px) / 2);
}
}
.heading {
max-width: 500px;
background-color: cyan;
height: 100px;
}
main {
max-width: 400px;
background-color: grey;
height: 500px;
}
<div class="wrapper">
<div class="heading"></div>
<main></main>
</div>
I set the body margins to 0 here as well, so that the whole thing fits with the 600px breakpoint. If you need those additional margins, you have to figure them in in the breakpoint value calculation.
Fiddle: https://jsfiddle.net/aqpyzogc/1/
When a design is fluid (there is no fixed width), how can wrapper div using margin:0 auto; be centered?
#wrapper {
max-width: 1000px;
min-width: 767px;
margin: 0 auto;
}
The max-width:1000px; means: make a container that has a maximum with of 1000px. If the page is larger (as an users uses a wider window) it'll fill the other part with white space.
The min-width:767px will then set the minimum. So if the users has a smaller window then 1000px then the container doesn't fit. So it'll decrease it's size automatically to a minimum of (in this case) 767px. If the users still has a smaller window, then a scrollbar will appear. The container will be set to 767px.
If an user is loading the page in between the max-width and min-width, then it'll take the maximum width available. Please see the "To be more precise an example per case" section below for more information about this topic.
As you're using margin:0 auto; on this #wrapper. The #wrapper will be centered with no margin on top of bottom. So instead of the whitespace on the right side which will be set on default, now the white space will be shared on both: left and right side of the container.
I made an example with a lower width then your question in the example below to show that it'll become centered. This is all because of the combination of: max-width which is smaller then the window-size of the user (box below) and the margin: 0 auto; which will try to center the div when possible.
#wrapper {
max-width: 200px;
min-width: 100px;
margin: 0 auto;
height:50px; /* added this as example */
background:red; /* add this as example */
}
<div id="wrapper"></div>
To be more precise an example per case:
Note (pre-condition): The cases below are when the div is as main-element in the page. So no other elements that have effect on the #wrapper-element. Just like the code examples in this post.
User has a browser that has a size of 1100px width: The #wrapper will have a width of 1000px and there will be 50px of whitepace left and 50px of whitespace right. (see the above code example).
User uses a browser that has a size of: 920px width: The #wrapper will have width of 920px; and there will be no whitespace on the left and right side.
User uses a browser that has a size of: 600px width: The #wrapper will have width of 767px; and there will be no whitespace on the left and right side. Beside that the user will have a scrollbar on the bottom of it's page to be able to see the complete #wrapper. See the code example below for the scrollbar:
#wrapper {
max-width: 5000px;
min-width: 1000px;
margin: 0 auto;
height:50px; /* added this as example */
background:red; /* add this as example */
}
<div id="wrapper"></div>
You can try this:-
#wrapper {
display: block;
max-width: 1000px;
min-width: 767px;
margin: 0 auto;
}
You can use Flexbox.
Set the following properties on the parent element of the element you want to center
display: flex;
justify-content: center; // for horizontally center
align-items: center; // for vertically center
I have a parent div with two children inside.
<div id="middleHolder">
<a href="#">
<img>
</a>
<div id="sidebar">
<p>content</p>
</div>
I want the a href to be floated left and be 100% of the image's size (655px X 506px). I want the sidebar to be floated left and stay inline with the a href as long as it's width is between 33.5% and 27%. Then, once the width is smaller, I want the div to break onto a new line and be 100%.
Is there a way to make a divs width oscillate between a given range before having it break on to a new line without having to use multiple media queries?
Below is the css:
#middleHolder > a {
float: left;
margin: 0 2% 2% 0;
max-width: 655px;
width: 100%;
}
#socialMediaSidebar {
float: left
min-height: 506px;
min-width: 270px;
width: 27-33.5%; /* Not accurate, but gives the idea of what I’m trying to accomplish */
}
#media width… /*unsure the specific size but would be inacted once socialMediaSidebar goes less then 270px. */
#socialMediaSidebar {
width: 100%;
}
You can utilize max-width and min-width together to ensure that it will stay within a given range. Based on the model, if the content will not fit, it should display: block and drop down a line if the given range will not fit in the flow of the document.
Example could be:
#test {
min-width: 25%;
max-width: 37%;
background: #CBA;
}
As seen here:
http://jsfiddle.net/e4j78ek6/1/
I am trying to make two blocks fit side-by-side within another block, but I'm confused as to why they don't sit nicely next to each other?
.container {height: 200px; width: 400px; background:darkgrey;}
.left {height: 100%; width: 49.8%; margin: 0 0.2%; background:blue; float:left;}
.right {background:red; height:100%; width: 50%; float:left;}
IF i make the margin 0.1%, it works but doesn't align perfectly on the right side.
Why doesn't that work, am I missing something?
http://jsfiddle.net/hyZhU/
Using latest Chrome.
margin and padding are additional to the width.
e.g., if you have width: 100px; margin: 10px; padding: 15px;, the actual width of the element will be 150px
Since you have width: 49.8%; margin: 0 0.2%;, that totals 50.2%+padding for each element. I lowered the width to 49.6% and specified padding: 0. Fiddle: http://jsfiddle.net/hyZhU/4/
The .02% margin is applied to both sides (the left and the right) so the first block actually has a total width of 50.2%. Use .01% for the margin instead.
http://jsfiddle.net/ExplosionPIlls/hyZhU/1/
When you use set the margin property with two you values, you're setting both the top and bottom margins equal to the first value, then the left and right margins equal to the second. Because of this, your left box has takes up space equivalent 0.2% (left margin) + 49.8% (actual width) + 0.2% (right margin), which adds up to 50.2%. This causes the second box to be pushed onto a new line.
Browsers have to translate the percentages into pixels, and different browsers add up those percentages differently. So 49.8% of the current width may be rounded up by one browser to 201px, and down to 199px by another.
That means that after being adjusted into pixels, the browser may be trying to fit content that's greater than 100% into the space, which causes the wrapping.
The best way to avoid this is to use longer percentage values to minimize rounding, and/or to combine border-box (http://www.paulirish.com/2012/box-sizing-border-box-ftw/) into your solution as well.
For example: 33.3333333% is better than 33.3%.
This should work,,
.container {height: 200px; width: 400px; background:darkgrey;}
.left {height: 100%; width: 45%; margin: 0 0.2%; background:blue; float:left;}
.right {background:red; height:100%; width: 45%; float:right;}
UPDATE
.container {height: 200px; width: 400px; background:darkgrey;}
.left {height: 100%; width: 199px; margin: 0 1px; background:blue; float:left;}
.right {background:red; height:100%; width: 199px; float:right;}
I have tried all sorts of things to try and get this working, I'm a little dated with html markup so please forgive me but i'm sure my problem can easily be solved. I have 2 divs (1 image logo and 1 flash object flame ) which I would like to center inside a container div which I would like to be centered with any browser screen resolution. I would also like the horizontal scroll bars to only appear when the browser window is below 800px wide hence the min-width:800px (this works ok) on the container div. my child divs keep appearing above and below each other and when I set them to absolute positioning the just appear to the left ontop of each other.....I just want everything to be aligned centrally and both divs at the top of the screen, can someone please help and point me in the right direction.
Thanks
Andy
.container {
margin-left: 0 auto;
margin-right: 0 auto;
min-width:800px;
width: 100%;
height: 500px;
background-color:#F00;
}
.logo {
margin: 0 auto;
position:absolute;
vertical-align:top;
display:inline-block;
width:1059px;
height:136px;
}
.flame {
margin: 0 auto;
vertical-align:top;
position:absolute;
display:inline-block;
width:861px;
height:134px;
}
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.container {
margin:auto;
width:800px;
height: 500px;
background-color:#F00;
}
.logo {
margin:auto;
float:left;
width:450px;
height:136px;
background-color:#096;
}
.flame {
margin:auto;
float:left;
width:350px;
height:134px;
background-color:#099;
}
</style>
</head>
<body>
<div class="container">
<div class="logo">LOGO GOES HERE</div>
<div class="flame">FLASH CONTENT GOES HERE</div>
</div>
</body>
</html>
Using floats, you can make your divs stack up next to each other. However, the sum of the widths of the divs must be less than or equal to the width of the container, otherwise the 2nd div will appear below the first div. Your container will also always be centered to the browser. Also, if the width of the browser is below 800px (width of the container), horizontal scroll bars will appear.
One last thing, this code centers the container but does not center your divs if the sum of the widths of the floated element are less than the width of the container.
You can go through this link to learn how to do that as well.
EDITED:
Alternately, if you know the sum of the widths of the logo and the flash banner, which I think you do, you can create a div with width equal to the sum and apply a margin:auto property to it. Involves use of an extra div and prior knowledge about the width of your logos and flash banners, but I think will suit your purpose.
Hope this helps. :)
.container {
margin-left: 0 auto;
margin-right: 0 auto;
min-width:800px;
width: 100%;
height: 500px;
background-color:#F00;
**position:relative;**
}
#media only screen and (max-width: 800px){
html{
overflow: auto;
overflow-y: hidden;
}
}
Final version
To sum it up - the task was basically this:
have two elements width different widths be aligned alongside in one row
this row should always be centered as kind of a header
only when the screen is smaller than 800px a horizontally scrollbar should appear
the non-visible edges are trimmed on the left and the right side
This is a possible solution:
Try before buy on jsfillde.net
And a little explanation:
HTML markup
<div class="wrapper">
<div class="center">
<img src="" alt="">
<object></object>
</div>
</div>
CSS
body, html {
width: 100%;
min-width: 800px;
height: 100%;
margin: 0;
padding: 0;
}
div.wrapper {
width: 100%;
height: 134px;
overflow: hidden;
}
div.center {
position: relative;
margin:0 auto;
width: 800px;
height: 100%;
}
div.center > img {
position: absolute;
top: 0;
left: -499px;
}
div.center > object {
position: absolute;
top: 0;
left: 560px;
}
On "How it works"
The first div wrapper spans an area from the left side to the right side. This is the space which is always visible. To cut off the edges I used overflow: hidden; on that element. So everything that sticks out will be invisible.
The second div center is placed in the middle of the viewport using margin: 0 auto. It has a fixed width. I used 800px because this was the desired min-width in the question. It will work with any other wide, too.
Now it's time to align the two header elements. Both have a fixed width. In this case the image is 1059px and the object is 861px, making it a total of 1920px. The middle of those elements would be obvious at 960px. Our container's center is actually at 400px, because the min-width of the page is 800px. So the actually meeting point of both elements is at 560px within this container, as we have a 160px shift. So for the object it's easy: simple set left: 560px;. But the left container must be placed, that it ends at this point. We had a width of 1059px and substract it from the 560px and get the final value of left: -499px;.
As the container in the middle is centered, both elements will be centered, too. And as the wrapper's overflow is hidden, both edges will be cut off at the end of the viewport. Without any scrollbars visible.
At the end, there's only one thing left: Set min-width:800px on the <body>-tag, so that the scrollbars get visible as soon, as the window is smaller than 800px.
First answer
position: absolute takes the element out of there parents flow, except you set the parents position explicitly:
.container {
position: relative;
}
This should do the trick, but it didn't test it with your markup.