This might be really simple but I just cant wrap my head around it.
CSS
#nav_bar{
max-width:1000px;
height:41px;
margin: 0 auto;
background-color:yellow;
}
#left{
float:left;
min-width:200px;
height:41px;
background-color:red;
}
#right{
float:right;
min-width:500px;
height:41px;
background-color:black;
}
HTML
<div id="nav_bar">
<div id="left">
</div>
<div id="right">
</div>
</div>
I'll explain this in colors. Basically I want the red box to float left and the right box to float right inside the yellow box. HOWEVER when I make the browser window smaller everything collapses and the black box goes UNDER the red (outside the yellow). I know this sounds very basic but I don't want it too collapse, I would be happy if it could just stay intact without moving at all and the browser just scrolls horizontally like it normally would if the window becomes too small for the content.
Thanks :)
You need to give #nav_bar a minimum width large enough to accomodate the two child elements:
#nav_bar{
...
min-width: 700px;
}
DEMO
Just add width:1000px or how much you need it to be, on the container. In this case "nav_bar".
Link to JSFiddle
#nav_bar{
max-width:1000px;
width:1000px;
height:41px;
margin: 0 auto;
background-color:yellow;
}
Related
i'm trying to create a header which contains 3 main elements centered on the page. On both sides of the 3 main divs i'd like to add another div which overflows the page by half it's width.
Like so. Both red divs are twice the length as shown, but overflow:hidden cuts them off.
This is easy enough to create but when i try to add the content of the blue diffs suddenly all of them slide down
I don't understand why this happens.
Furthermore when i add some content to the side divs everything falls back into place
So then i thought of just adding a nbsp; to the red divs to keep everything in position. Which worked. however when i try to center the content of the blue diffs vertically by adding a padding-top the red diffs move down for reasons unknown to me
here is my css
div.padded{
padding-top:20px;
}
.header{
width:100%;
border:2px solid black;
white-space:nowrap;
overflow:hidden;
}
.leftExtend{
width:25%;
margin-left:-12.5%;
background-color:red;
display:inline-block;
}
.middle{
width:25%;
background-color:blue;
display:inline-block;
}
.rightExtend{
width:25%;
background-color:red;
display:inline-block;
}
and the html
<div class="header">
<div class="leftExtend">sometext</div>
<div class="middle padded">aaa</div>
<div class="middle padded">bbb</div>
<div class="middle padded">ccc</div>
<div class="rightExtend">sometext</div>
</div>
I created a jsfiddle to demonstrate the problem.
Why does this happen, what am i doing wrong and what would be the correct way to achieve this behavior?
Try add vertical-align: top; to the divs:
.header div {
vertical-align: top;
}
The default is baseline which causes them to appear at the bottom.
JS Fiddle
I have div inside a div (.konteineris2 and .feedback). When I use left:-200px in .feedback class, fixed div suddenly appears in the very left side of screen, outside .konteineris2. All I wanted it to move for 200px to the left outside .konteineris2, but not appear to the left screen border and then move 200px from that point.
HTML:
<div class="konteineris2">
<div class="feedback">
</div>
</div>
CSS:
.feedback{
position:fixed;
top:220px;
width:100px;
height:200px;
background:white;
}
.konteineris2{
width: 960px;
height:700px;
position:absolute;
top:460px;
padding-top:30px;
pointer-events:none;
overflow:hidden;
}
Any ideas how to manage it?
change position:absolute; to position:relative; in .konteineris2
Add margin-left: -200px; in .feedback
Check it on CodePen . I think you're looking for the same thing.
Without seeing more of the context in which this occurs I'd guess the following might achieve your goal: Try adding margin-left:-200px instead.
So on my screen this works fine on all browsers, but when i try to view my site on laptop or a smaller screen #sidebar and #center move to the left. I assume it has something to do with #sidebar's margin-left but is there any other way to make sidebar and center go under the header and next to each other?
#header {
background-image:url(media/dddd.png);
margin-left:auto;
margin-right:auto;
width:1000px;
height:250px;
position:relative;
}
#sidebar {
height:800px;
width:300px;
background-color:#CCFFFF;
float:left;
margin-left:23.5%;
margin-right:auto;
position:static;
}
#center {
margin-left:auto;
margin-right:auto;
height:800px;
width:700px;
background-color:white;
float:left;
border:1px solid black
}
Since #sidebar has left-margin: 23.5%;, it moves to the left when you reduce the window because it will always be 23.5% of the window width. So if your window is 1000px wide, the #sidebar div's margin-left will be 235px, and this number decreases with the width of the window (making it look like the div is moving to the left).
The #center div moves down because the width of the window is less than the margin-left value + the width of #sidebar + the width of #center. When the window is too narrow, the divs rearrange to fit (like how text in a text box goes to a new line when it runs out of space).
If you want to keep your layout how it is when the window gets smaller, there are two easy things you can do:
Make all of your divs width a percentage: If your #sidebar has margin-left:25%; width:20%; and your #center div has width:50%, both of the divs (and the margin) will resize as the screen shrinks (this is one way Responsive Web Design works). Here is an example on jsFiddle.
Put everything in a container div: Since it sounds you want to have your header, sidebar, and content in one block, you could wrap all of these elements in a container div. You'll have to change your CSS a bit, but a basic implementation would look something like this:
CSS
#container {
width: 1000px;
margin-left:auto;
margin-right:auto;
}
#header {
background-color:red;
width:auto;
height:250px;
}
#sidebar {
height:800px;
width:300px;
background-color:#CCFFFF;
float:left;
}
#center {
height:800px;
width:auto;
background-color:green;
border:1px solid black
float:left;
}
HTML
<div id=#container">
<div id="#header">header content</div>
<div id="#sidebar">sidebar content</div>
<div id="#center">center content</div>
</div>
Here is a jsFiddle with this code.
Since the container div has a set width, you don't have to worry about the widths of the child elements.
so i think you want to get #sidebar and #center beside each other,centered and under #header or?
Would be nice if we can see your html markup but
just give every div position:relative and a float left.
then you give the #sidebar left:50%.
Then add the width of both divs /2 (#sidebar and #center). --> (sidebar.width + center.width) /2
Then you give the result #sidebar with a margin-left and a minus before. --> margin-left: -500px
I think the issue lies with your HTML.
Ensure that your sidebar <aside> and your content <article> are nested within the same <div> or <section>.
The terms I'm using are with HTML5 syntax. If you aren't using HTML5, replace all elements with <div>.
Example:
<header></header>
<div>
<section></section>
<aside></aside>
</div>
If both the <section> & <aside> have a width:% or px; & float:left; you should be fine.
First time asking a question :)
My header DIV has a background that is curved like a wave. I have a sidebar floated to the right located in a DIV underneath the header DIV. The background image for header curves up right where sidebar is which leaves a gap where sidebar hits the bottom of the header div (because obviously divs aren't curved). I need the background of sidebar to extend underneath header so there is no gap. What should I do?
HTML:
<div id="header"></div>
<div id="body>
<div id="main-content"></div>
<div id="side-bar></div>
</div>
CSS:
#header{
width:100%;
height:272px;
margin:0 auto;
background-image:url('../img/header.png');
background-repeat:no-repeat;
text-align:center;
}
#body{
width:960px;
height:auto;
margin:0 auto;
padding-bottom:159px;
}
#main-content{
width:60%;
height:auto;
margin:0 auto;
float:left;
padding:15px;
background-color:#fbf8ee;
}
#side-bar{
width:30%;
height:auto;
margin:0 auto;
float:right;
padding:10px;
background-color:#961912;
border-right:thick #558c21 solid;
border-left:thick #558c21 solid;
}
![Here is a screenshot of what it looks like currently. The sidebar has no content so it is narrow but I want it to extend up behind the header image so there is no gap.1
Not 100% sure on what you're wanting to achieve, but if you're wanting the sidebar to show behind the header and extend upwards, try adding to the sidebar style:
margin-top: -100px; /* Higher or lower number depending on how far up you want it to go */
position: relative;
z-index: -1;
Not really sure if I understand you correctly but try to add:
position: relative;
top: -10px;
to #side-bar as you can see here http://jsfiddle.net/NpZJV/
If I may advice, don't use % for width/height and positions use px instead.
You could use CSS3 to make a background size, check it out to see if it solves your problem.
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Try using
background-size: 600px 2921px;
You might be able to get it to fit
Ive had quite some problems with positioning elements with CSS related to people using differently sized screens. Whats a bulletproof way to position elements so that they keep their position on the screen no matter how big the viewport is?
We have got 2 simple examples here.
In demo 1, div will always stick to top left of the screen regardless of screen size/resolution.
DEMO 1
<div id="test">This div will always appear on top left by default regardless of screen size.</div>
#test{ width:150px; height:150px; background-color:#666; }
This one will always stick to right hand side with some margin
DEMO 2
<div id="test">This div will always appear on right hand with 100 margin.</div>
#test{float:right; margin-right:100px; width:150px; height:150px; background-color:#666; }
wraped div. For example:
html:
<div class="wraped">
<div class="someDiv">
Hi
</div>
<div class="someDiv">
Hi reloaded
</div>
</div>
css:
.wraped {
background:grey;
width:500px;
height:300px;
margin:auto
}
.someDiv {
width:230px;
text-align:center;
padding:10px;
background:#ccc;
outline:1px solid black;
float:left;
}
You can preview this in http://jsfiddle.net/wandarkaf/2VVcm/