How do i prevent the content from jumping down below the sidebar when the min-margin is reached?
http://jsfiddle.net/7SAHm/4/
<div id="wrapper">
<div id="sidebar"></div>
<div id="content"></div>
</div>
#wrapper {
width: 100%;
overflow:hidden;
}
#sidebar {
float:left;
width: 20%;
min-width:50px;
background-color:#ffb8e0;
}
#content {
float:left;
width:80%;
background-color:#fff7b8;
}
Try to resize the browser window and see that the content jumps down, instead i want it to stay next to each other, even though 80%+50px > wrapper width, instad it should overflow not jump down.
Thanks in advance!
You should use a media query in your CSS to change the percentage-
I have edited your code to show you a demo http://jsfiddle.net/kevinPHPkevin/7SAHm/5/
#media screen and (max-width: 400px) {
#sidebar {
width: 50%;
}
#content {
width:50%;
}
}
Related
I want to keep three div in one row of different width one in left one in center and one in right.
Left div is of 160px
Center Div is of 640px
Right Div is of 160px
All i want is when they open in wide screen All will look separate on in left one in center one in right.
And When User Re-size Browser window or open in smaller resolution they come near to each other and do not collapse(means they acquire atleast 960px = 160 + 640 + 160)
As Far I done this with the help of StackOverflow & Google :
Html :
<div id="main">
<div id="leftDiv">left</div>
<div id="centerDiv">center</div>
<div id="rightDiv">right</div>
</div>
CSS:
#main {
overflow:hidden;
}
#main div {
width:33%;
float:left;
}
#leftDiv
{
width:160px;
}
}
#centerDiv {
text-align:center;
width:640px;
}
#rightDiv {
text-align:right;
width:160px;
}
If you can help me please provide me solution.
Thanks In Advance
Well, by using this approach you have to reorder the elements as:
<div id="main">
<div id="leftDiv">left</div>
<div id="rightDiv">right</div>
<div id="centerDiv">center</div>
</div>
You could keep the centerDiv element at the center of the layout by using auto value for the left/right margin.
Also you could set a minimum width to the container element (#main) in order to prevent collapsing the layout.
#main {
min-width: 960px; /* minimum width: 160px + 640px + 160px */
}
#leftDiv { float: left; width:160px; }
#rightDiv { float: right; width:160px; }
#centerDiv {
width:640px;
margin: 0 auto;
}
WORKING DEMO
For these i would suggest using twitter bootstrap, you just need to do this:
css:
#main {
min-width:960px;
}
/* these are optional, but you do want your columns to scale unless you have a max width */
#leftDiv, #rightDiv {
width: 160px;
}
#centerDiv {
width: 640px;
}
html:
<div id='main' class='row'>
<div class='col-md-2' id='leftDiv'></div>
<div class='col-md-8' id='centerDiv'></div>
<div class='col-md-2' id='rightDiv'></div>
</div>
Let's say I have the following mark-up:
<style type="text/css">
.floatleft {
float: left;
}
.floatright {
float: right;
}
</style>
<div id="container">
<div id="box1" class="floatleft"></div>
<div id="box2" class="floatright"></div>
</div>
When I view this on a small screen on an iPad or iPhone etc. The two boxes will either:
Shrink (but stay next to each other) or
#box2 will "jump" down and position itself under #box1.
Q: How do I make #box2 jump down under the first <div />?
Use media queries and remove the floating on small sized screens.
Change #box2 to float: left; when on a mobile device, using a media query.
You just need to remove the property float with mediaqueries:
#media screen and (max-width:480px) {
#box1, #box2 {
float:none;
}
}
The demo http://jsfiddle.net/yYq8W/8/
I have a left-column and a right-column. When I resize the browser small, the right column spills on to the left. I want the right column to just collapse under the left. How can I do that?
<div class = "container">
<div class = "left-column"> A bunch of content </div>
<div class = "right-column"> A bunch of more content </div>
</div>
.container { width: 100%; }
.left-column { width: 50%; }
.right-column { width: 50%; }
Without seeing any code it's hard to know.
I usually do this with width:100%; or display:block depending..
#media screen and (max-width: 600px){
.right-column{
float:none;
display:block;
width:100%;
}
}
Use media-query for that and on max-width: 600px set ur resolution where do you want right column to fall into the new line ...
Kinda stuck on a small issue trying to use a div with a background image in the top left [a logo] not sure how to get this done.... since the variable width is not dependent on a percentage width... i.e.
the maximum width of the div is 1200px
the minimum width of the div is 900px
When someone resizes their browser I need that div to expand or contract depending on the viewport size.
Any thoughts on how I can do this [is this possible without javascript?]?
UPDATE
This is where I got to - seems to work well in most browsers until I hit IE7..
<div id="viewport" class="[[*layout]]">
<div id="contentwrapper">
<div class="wrapper logo">
<div id="header">
[[$TopNav]]
</div>
<div id="content" class="homepage">
[[!If? &subject=`[[*id]]` &operator=`==` &operand=`1` &then=`[[$HomePageTpl]]` &else=`[[$DefaultPageTpl]]` ]]
</div>
</div>
</div>
<div class="wrapper footer">
<div id="footer">
<div id="footnav">[[$FootNav]]</div>
<div id="copyright">[[$Copyright]]</div>
<div id="news-feed">[[$NewsFeed]]</div>
</div>
</div>
div {border: 1px dotted #ccc;}
div#viewport {width:100%;float:left;min-height:100%;position:relative;background-color:#000000;}
div#contentwrapper {width:100%;float:left;background-color:#ffffff;margin-top:8px;}
div#content, div#footer, div#header {float:right;width:900px;padding-left:100px;}
div#header {}
.wrapper {
margin:0 auto;
height:150px;
width:100%;
max-width:1110px;
min-width:1060px;
text-align:left;
}
.wrapper.logo {
background:transparent
url(/assets/images/layout/anderson-lyall-consulting-group-logo.png) no-repeat left top;
}
div#topnav {width:900px;float:right;margin:0 auto;border:1px solid #cc0000;}
CSS has 2 properties for those scenarios, that work from IE7+ called:
min-width: https://developer.mozilla.org/en/CSS/min-width
max-width: https://developer.mozilla.org/en/CSS/max-width
That's probably what you are looking for, you could set the width to 100% first then add the min/max width to control it.
For a no-js solution on modern browser you can use CSS media queries like so
#media screen and (max-width: 1199px) {
div { width: 900px; }
}
#media screen and (min-width: 1200px) {
div { width: 1200px; }
}
this will automatically resize the div depending on your window width and not on the content. Media queries support: http://caniuse.com/css-mediaqueries
a simple proof-of-concept demo
<html>
<head>
<style>
div { margin: 0 auto; border: 1px red solid }
div:after { display: block; }
#media screen and (max-width: 1199px) {
div { width: 900px; }
div:after { content: " max-width is 1199px" }
}
#media screen and (min-width: 1200px) {
div { width: 1200px; }
div:after { content: " min-width is 1200px" }
}
</style>
</head>
<body>
<div>Resize your browser</div>
</body>
</html>
I have that problem: I want to have a centered layout with or without a right-side sidebanner (it should float right to the content). so my css has to center content+sidebanner IN CASE there is a sidebanner tag or just the content (content and sidebanner have a fixed width) if there is no sidebanner tag - there are some pages where there should be the sidebanner and on some it isn't. css should format both possibilities well.
so it should like this:
<div id="wrapper"><div id="content"></div><div id="sidebanner"></div></div>
i tried a couple of things with floats and display:inline but it didn't really work out :(
Try this...
#wrapper {
position:relative;
left:50%;
margin-left:-500px;
width:1000px;
}
margin-left should be negative half of the width.
For the sidebanner, when its there, you can add a class .wsidebanner to the content block as follows:
<div id="content" class="wsidebanner"></div>
and the css would be:
#content {
background-color:#199;
}
.wsidebanner {
float:left;
width:800px;
}
#sidebanner {
background-color:#919;
float:right;
width:200px;
}
i would use following
#wrapper {
width:1000px;
margin:0 auto; //centering the wrapper
position:relative; //so we can position the ad absolutely
}
#sidebanner {
width:120px;
position:absolute;
top:0;
right:-120px; // same as width
}
Since selecting an element's parent is not possible with CSS, you'll have to add a class to the wrapper div when there's no sidebar.
HTML
<div id="wrapper">
<div id="sidebanner">...</div>
<div id="content">...</div>
</div>
<div id="wrapper" class="nosb">
<div id="content">C</div>
</div>
CSS
#wrapper {
width: 400px;
margin: 0 auto;
}
#wrapper.nosb {
width: 300px;
}
#content + #sidebanner {
margin-right: 100px;
}
#sidebanner {
float: right;
width: 100px;
}
See fiddle.
Note: IE6 doesn't support the adjacent sibling selector.