I am very new to CSS, so excuse my naive mistakes.
Goal: Trying to make a simple and responsive layout. I am able to make the #container and #content responsive, but the fixed #header remains in-place and overflows when resizing the browser window. If you resize the browser window by pushing it to the left, you will see what I am talking about.
Also, side question: If I were to add an Image in the header, would the same (potential) solution apply? If you're curious about this kind of lay-out, I am trying to edit my "Tumblr" layout and I want to make it responsive (it's a private tumblr blog that I experiment on, I am not trying to make it responsive on cell phones / tablets – yet.)
Here is this JSFIDDLE: http://jsfiddle.net/yrbvw473/2/
HTML
<div id="container">
<div id="header">This Is The Header</div>
<div id="content">
<div class="post">A</div>
<div class="post">A</div>
<div class="post">A</div>
</div>
</div>
CSS
#container {
border: 0px solid;
max-width: 640px;
padding-left: 50px;
padding-right: 50px;
margin: auto;
display: block;
overflow-x: hidden;
}
#header {
margin-top: 0px;
margin-bottom: 0px;
position: fixed;
background-color: grey;
width: 640px;
z-index: 1;
text-align: center;
display: block;
}
#content {
width: 100%;
overflow-x: hidden;
clear: both;
border: 1px solid;
margin-top: 50px;
}
.post {
margin-bottom: 45px;
width: 100%;
border: 1px solid;
margin-top: 50px;
text-align: center;
}
Thank you for all the help! Again, I am new too this...
Comment or remove this position: fixed; on #header. And change width to max-width: 563px;
bcause u put the value of header width, that's why the header cannot flexible following browser width. use width:100% instead
SEE FIDDLE
Related
I would like to have a image on the left with a heading on the right. I want both of them to scale in size and spacing as the page is shrunk. I have used this code: width: 10%; height: auto; margin: 2% 0px; to have the image on the top left of my page and scale in both spacing and size to the page when the browser is shrunk (I have also included media queries which wouldn't think would make a difference). I have tried using positioning: absolute which doesn't work. I am a novice to using HTML5 and CSS3. This is my first project and second post on Stack Overflow.
I think this is what you are trying to do
HTML
<div class="wrapper"><img src="yourimage.jpg"/><h1>my Heading Goes here</h1></div>
CSS
div.wrapper {
width: 100%;
height: auto;
max-width: 600px;
border: thin solid #333;
}
div.wrapper:after {
content: '';
display: block;
clear: both;
}
div.wrapper img {
display: block;
float: left; width: 40%;
height: auto;
margin-right: 5%;
}
div.h1 {
display: inline-block;
line-height: 20px;
margin: 0px;
padding: 0px;
}
You can check it here
jsfidlle
Could you make a http://jsfiddle.net/?
It's kinda hard to understand what you're after based on our description alone.
I have the typical 3 column layout and I need it to be fluid (ish). The specs of the projects are: we need the container to go from 1024px to 1440px max (that's easy). And the center column needs to go from 514 (at 1024) to 626 (at 1440), the sidebars on both sides containing the rest of the space.
I don't see an easy way around this, I've played with max-width and min-width but since the proportions are not the same at the 2 breakpoints, I can't use percentage width to make the columns fill the space on higher resolutions.
Here is my code:
<div id="container">
<nav id="sidebar-left">Left</nav>
<section id="page">Center</section>
<div id="sidebar-right">Right</div>
</div>
#container{
min-width:1024px;
max-width: 1440px;
width: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
min-height: 100%;
}
#sidebar-left{
min-width: 230px;
max-width: 387px;
float: left;
background: red;
height: 300px;
}
#sidebar-right{
min-width: 230px;
max-width: 387px;
float: right;
background: blue;
height: 300px;
}
#page{
min-width: 514px;
margin: 0 20px;
max-width: 626px;
float: left;
background: purple;
height: 300px;
}
And I also made a fiddle:
https://jsfiddle.net/1y59nuxz/
I'd rather have a css only solution, I'm pretty sure is more or less easy to solve using jquery but I'd want to know if this is approachable with using it.
EDIT: I need this to be compatible with IE9+
Ok. You have several solutions to accomplish this task.
One solution is to change order of elements in your html (if possible):
<div id="container">
<nav id="sidebar-left">Left</nav>
<div id="sidebar-right">Right</div>
<section id="page">
<div class="page-inner">Center</div>
</section>
</div>
For "#page" use next css code:
#page {
overflow: hidden;
height: 300px;
}
.page-inner {
height: 100%;
margin: 0 20px;
background: purple;
}
Example code:
#page {
overflow: hidden;
height: 300px;
}
.page-inner {
height: 100%;
margin: 0 20px;
background: purple;
}
#container{
min-width:1024px;
max-width: 1440px;
width: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
min-height: 100%;
}
#sidebar-left{
min-width: 230px;
max-width: 387px;
float: left;
background: red;
height: 300px;
}
#sidebar-right{
min-width: 230px;
max-width: 387px;
float: right;
background: blue;
height: 300px;
}
<div id="container">
<nav id="sidebar-left">Left</nav>
<div id="sidebar-right">Right</div>
<section id="page">
<div class="page-inner">Center</div>
</section>
</div>
You can also check the fiddle.
Another solution is to apply flexbox. It's an elegant and easy way.
I think this layout can be achieved using some table & table-cell css like so:
basically set the .container to display: table
then set all direct children of the .container to display: table-cell
now these children will shrink/grow accordingly to their parent, however some tweaks have to be made for the #page to stay put at 626px widh and shrink down accordingly
max-width/min-width combo won't work on the #page div, however we can specify a fixed width, according to the max-width desired, in this case 626px, so that this div won't go past 626px width, but will shrink down if the window is resized
finally since we're using display: table-cell on these children divs, any margin prop. will be ignored, however we can mimic a margin using some border-left & right props. OR add another div inside the #page div that will hold the content and have some margin applied to it and the background accordingly.
Check out the demos bellow:
fake margins to the #page here
OR another div that holds the content for #page here
I have modified your code on fiddle
or else check the code below.
Html
<div class="content">
<div class="content__left">left</div>
<div class="content__right">Right</div>
<div class="content__middle">Center</div>
</div>
CSS
html, body, .container {
width: 100%;
height:100%;
min-width:1024px;
max-width: 1440px;
}
.content__left {
width: 20%;
max-width:200px;
float: left;
background: red;
margin-right:20px;
height:300px;
}
.content__middle {
min-width: 514px;
background: purple;
overflow: auto;
height:300px;
}
.content__right {
width: 20%;
max-width:200px;
float: right;
background: blue;
margin-left:20px;
height:300px;
}
I am currently making a website without using framework however I have run into a problem. My divs are not getting centered within the container even though the container itself is centered in the body.
Html
<body>
<div id="content">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
Css
#content{
width: 90%;
height: 100%;
margin: 0 auto;
}
.box{
width: 400px;
height: 150px;
float: left;
border: 1px solid #c8c8c8;
border-radius: 3px;
margin: 13px;
}
The divs are perfectly centered when I have my window to full width, but once I resize it, they just reorganize without centering.
Before resizing:
http://cl.ly/image/241R2I24280w/Screen%20Shot%202014-09-26%20at%2021.49.23.png
After resizing the window: http://cl.ly/image/2y2g2W0n230g/Screen%20Shot%202014-09-26%20at%2021.50.21.png
I have tried different methods to solve it, such as doing margin: 0 -10%; and margin: 0 25%;
When it comes to positioning I get confused.
Thanks.
Just change your CSS like this, this way you can adapt your boxes in many ways and they will react to responsive layouts as expected:
#content {
width: 90%;
height: 100%;
margin: 0 auto;
text-align:center;
display:block;
}
.box {
width: 45%;
height: 150px;
display:inline-block;
border: 1px solid #c8c8c8;
border-radius: 3px;
margin: 13px 2%;
}
See fiddle here
Explanation:
I have removed your floats, used block elements and replaced your fixed sizes by percentages. Then, I used a text-align:center property in your container box #content so everything is nicely aligned in the center of that container. Now, if you resize, columns will take 45% of the width of the screen, but you can obviously change the behavior via media queries and use something like .box{display:box} for small screens
There are multiple solutions to your problem. Depending on what you have inside those boxes this might be the simplest one: text-align:centerwith a display:inline-block combo; See here.Fiddle
2 solutions :
You can use a percentage for the width your boxes.
#content{
width: 90%;
height: 100%;
margin: 0 10%;
}
.box{
width: 30%;
height: 150px;
float: left;
border: 1px solid #c8c8c8;
border-radius: 3px;
margin: 13px;
}
Boxes will resize with the content but the stuff in the boxes might look weird in small sizes.
Or
You can use a pixel value for the width of your content.
#content{
width: 1200px;
height: 100%;
margin: 0 10%;
}
.box{
width: 400px;
height: 150px;
float: left;
border: 1px solid #c8c8c8;
border-radius: 3px;
margin: 13px;
}
Width of boxes will not change while resizing, nor the stuff in it, but that can be painful on small screens.
add auto margin for your box
.box{
width: 400px;
height: 150px;
border: 1px solid #c8c8c8;
border-radius: 3px;
margin-top: 13px;
margin-left:auto;
margin-right:auto;
}
I made your files on my machine and the divs are not centered so I assume your screen or resolution settings are different, or your content container is within one or more other divs?
Anyhow, try adding 'clear:left;' in your box class code and it should resolve your issue (put it just above the 'float:left' line. good luck!
working on a few design changes for my website on tablets and trying to work on this idea.
So the basic structure is like so:
<div id='container'>
<div id='leftbox'>Content</div>
<div id='rightsidebar'>Sidebar</div>
</div>
What i want, is for the container to be 100% width, but keep a right hand sidebar at 260px but allow the leftbox div to always fill the width left.
I have made a fiddle to show. But heres the CSS from that fiddle first:
#container {
width: 100%;
height: 500px;
background-color: #999;
color: white;
text-align: center;
}
#leftbox {
width: 50%;
height: 500px;
background-color: #666;
float: left;
}
#rightsidebar {
width: 260px;
height: 500px;
background-color: #333;
float: right;
}
Heres the fiddle: http://jsfiddle.net/X2w3D/
In that example I have just set the width of the left div to 50% to give it a width. The aim is that if the user was to be on a web browser, and resize then there would be no gap between the leftdiv and the rightsidebar. So the rightsidebar is always the same width, but the leftdiv will always fill the rest of the div up in width.
Thanks, Craig.
You might be interested on calc
width: calc(100% - 260px);
Demo
Referrence
Have you considered using the flexbox model? It was designed to answer this kind of problem.
I updated your fiddle and added an example solution: http://jsfiddle.net/X2w3D/4/
I used display:flex; on the container, then added flex-grow:1; to the #leftbox
#container {
width: 100%;
height: 500px;
background-color: #999;
color: white;
text-align: center;
display:flex; // ADDED THIS
}
#leftbox {
flex-grow:1; // ADDED THIS
height: 500px;
background-color: #666;
float: left;
}
Edit: If you need retro-compatibility for the flexbox model, I cannot recommend the amazing flexbox.less enough. It has saved my life quite a few times.
I'm trying to make a menu bar centered horizontally in the header of my page. For some reason, i can't get the centering to work. I made a little test page roughly displaying the problem: JSFiddle. The inner div has to be 5px away from the bottom, that's whatI use the position: absolute for.
I've tried searching on the web alot, but everything I find gives me the same result, or none at all. Most problems I found were when text-align: center wasn't in the container div, but even with it, it still doesn't work.
I removed two css attributes and it work.
position: absolute;
bottom: 5px;
Check this Fiddle
5px from bottom. Fiddle
This is not a perfect way, but it's still kind of useful. I first think of this idea from this Q&A.
You'll have to make some change to your HTML:
<div id="container">
<div id="wrapper-center"> <!-- added a new DIV layer -->
<div id="inner_container">
TEXT ELEMETNES IN THIS THING!!!!
</div>
</div>
</div>
And the CSS will change to:
#container {
background: black;
width: 100%;
height: 160px;
position: relative;
}
#inner_container {
display: inline-block;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
position: relative;
left:-50%;
}
#wrapper-center {
position:absolute;
left:50%;
bottom:5px;
width:auto;
}
Demo fiddle
The trick is to place the wrapper at the given top-bottom position, and 50% from left (related to parent), and then make the true content 50% to left (related to the wrapper), thus making it center.
But the pitfall is, the wrapper will only be half the parent container's width, and thus the content: in case of narrow screen or long content, it will wrap before it "stretch width enough".
If you want to centre something, you typically provide a width and then make the margins either side half of the total space remaining. So if your inner div is 70% of your outer div you set left and right margins to 15% each. Note that margin:auto will do this for you automatically. Your text will still appear to one side though as it is left-aligned. Fix this with text-align: centre.
PS: you really don't need to use position absolute to centre something like this, in fact it just makes things more difficult and less flexible.
* {
margin: 0;
padding: 0;
}
#container {
background: black;
width: 100%;
height: 160px;
}
#inner_container {
color:red;
height:50px;
width: 70%;
margin:auto;
text-align:center;
}
If you don't want a fixed width on the inner div, you could do something like this
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
That makes the inner div to an inline element, that can be centered with text-align.
working Ex
this CSS changes will work :
#container {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner_container {
display: inline;
margin: 0 auto;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
Try this:
html
<div id="outer"><div id="inner">inner</div></div>
css
#outer {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner{
display: inline;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
example jsfiddle
You may set the inline style for the inner div.
HTML:
<div id="container">
<div align="center" id="inner_container" style="text-align: center; position:absolute;color: white;width:100%; bottom:5px;">
<div style="display: inline-block;text-align: center;">TEXT ELEMETNES IN THIS THING!!!!</div>
</div>
</div>
Here is working DEMO