I am building this module in html and css I would like to avoid the use of JavaScript.
To help explain what I'm trying to create I've attached a picture.
Box A - #left will have a picture inside.
Box B - #right will have text inside.
Neither Box A or B can overlap each other.
So far -
I have managed to build the module relying on (%) and have got it to rescale smaller or larger depending on the width of browser. But it's not quite working how I intend it to yet.
The problem I'm facing -
When the module is scaled down to its smallest with the help of (min-width) Box B's width scales down with it. This is not what I intend to happen, Box B needs to stay a fixed (px) width while Box A rescales by a (%) width.
To overcome this problem I tried giving Box B (px) width instead of (%). This made matters worse - now when the browser is scaled down to its smallest Box B leaves the viewport & the scrollbars (x axis) takeover. Box B needs to be within the viewport even at the smallest scale.
Any ideas of how to get this working? Thanks.
Html -
<div id="outer">
<div id="left">Box A</div>
<div id="right">Box B</div>
</div>
Css -
#outer {
background-color:#830000;
margin:0px 0px 0px 0px;
max-width:815px;
min-width:518px;
position:relative;
width:100%;
z-index:1;
}
/*Box A*/
#left {
background-color:#b1b1b1;
float:left;
padding-bottom:57%;
position:absolute;
width:72%;
height:10px; /* extra 10px helps show overlap of #left onto #right*/
z-index:2;
}
/*Box B*/
/*Switch between #right(px) and #right2(%) for the two outcomes I'm getting*/
#right { /* using px - Good - the width is fixed, But - should not overlap #left */
width:229px;
background-color:#81dd27;
float:right;
padding-bottom:57%;
position:relative;
z-index:1;
}
#right2 { /*using % - Good - no overlapping, But - the width of 229px decreases*/
width:28%;
background-color:#81dd27;
float:right;
padding-bottom:57%;
position:relative;
z-index:1;
}
"px" and "%" is a bad idea.
Use media query and gives a fixed size for your 2 columns.
HTML
<div id="main">
<div class="left" id="c1">l</div>
<div class="left" id="c2">l</div>
<div class="clear"></div>
</div>
CSS
*{margin:0;padding:0}
.clear{clear:both;}
.left{float:left;height:300px;}
#main{width:100%;min-width:518px;}
#c1{background:red;width:72%;}
#c2{background:green;width:28%;}
#media screen and (max-width: 518px) {
#c1{width:290px;}
#c2{width:228px;}
}
I'm not sure that answers your question...
http://codepen.io/ColoO/pen/njLyD
Related
I have a 960px wide wrap, and then a 930px wide main-content wrap with 15px left/right margins. within the main-content wrap there are three divs floated left that are each 280px wide, with 15px margin-right to fill the main-content. To avoid giving the div to the right a margin and make it not fit I gave it another class and set its margin-right to 0.
I am trying to make the site responsive and these are my percentage calculations:
wrap=100%
main-content=96.875%
main-content margins=1.5625%
divs=30.10752688%
div margins=1.61290323
CSS:
#page-wrap {
width:960px;
margin: 0 auto;
background: white;
}
#main-content {
width:96.875%;
margin:15px 1.5625% 0 1.5625%;
}
.box { (the divs)
float:left;
width:30.10752688%;
min-height:160px;
margin:30px 1.61290323% 0 0;
}
.right{ (only the div to the right)
margin-right:0;
}
HTML
<div id="page-wrap">
<div id="main-content">
<div class="box">
content
</div>
<div class="box">
content
</div>
<div class="box right">
content
</div>
</div>
</div>
I don't know why the divs dont seem to resize correctly. Any help would be much appreciated!
The site can be viewed here for now: http://hl.kylmark.se
The problem I see is that there's a fixed 10px padding around all of the blue boxes. Since the padding is added on to an element's width, it throws off your percentage math.
Solution 1
You could just change the side padding on those boxes to a percent value like everything else:
.blue {
...
padding: 10px 1.0752688%;
}
With that approach you'd be collapsing the borders as you get smaller, which may not be desirable.
Solution 2
Maybe a better approach is to change the box-sizing property to calculate width from border to border rather than from content edge to content edge. That way you can have a 10px padding inside a flexible container whose width is figured correctly:
.box {
...
width: 32.258065%;
box-sizing: border-box;
}
One more thing
You may also want to watch out for is sub-pixel rounding. When your percentages calculate to something other than a whole pixel, the browser has to decide how to round it. If too many things are rounded up, the widths will get too big and cause content jumps like that in some browsers. You'll want to double-check that in your supported browsers. You can read a good explanation here.
I need to have two inline divs, the left div should be fluid and the right should be fixed. The minimum width for the left fluid column should be 801px and the maximum width for the left div should be 1250px. The right fixed div width should always be an exact 250px.
Can someone please show me how to do this? If the body width is 1500px for example, the left fluid div should grow and push the right div out to 1250px and stop. If the body content is 801px then the left div should be around 550px.
I've already asked this question but wasn't able to get anything that worked.
.intro {
float:left;
height:200px;
width:100%;
padding:10px 0;
}
.intro-right,
.intro-left{
display:inline;
}
.intro-right {
float:left;
width:250px;
margin-right:20px;
height:200px;
}
.intro-left {
min-width:801px;
max-width:1250px;
height:200px;
}
<div class="intro">
<div class="intro-left">
<h2>Test</h2>
<p>Test</p>
</div>
<div class="intro-right">right fixed</div>
</div>
try with javascript in a way that will look not too bad on page load
for example you hide right-intro, with left set to 100%,
on load calculate the size for left make appear right from the right while decreasing left + a fallback if no javascript with fixed width for both
NB: add a window resize event listener
Simply, I want the body of the site to occupy 100% of the browser in 1024x768 monitors, and for monitors with higher resolution (1024x768 and higher) to display the body in the middle (center aligned) leaving equal amounts of space on the left and right.
This is very common in many websites but I don't know how to implement it. Can anybody show me how, please, and finish up the CSS code I started? Thank you very much.
HTML
<div class="header">content</div>
<div class="side-bar">content</div>
<div class="container">content</div>
CSS
html body{
margin:0;
background:#fff;
}
.container{float:left}
.side-bar{float:left}
"Today, most visitors are using a screen resolution higher than 1024x768 pixels" - http://www.w3schools.com/browsers/browsers_display.asp
so if you need to have a 1024 pixels width website you just make your container to be 1024 pixels fat :) and margin:auto;
http://jsfiddle.net/kx2nE/3/
I used a smaller size one so you can see better the result in jsfiddle, but you can replace those values in your css.
#container
{
width:300px !important;
height:500px !important;
border:1px solid red;
margin:auto;
}
<div id="container">
container with equal margins on window resize<br />
<br /><br /><br />
<b>
width and height values set to yours 1024x768
</b>
</div>
Check out the Fluid 960 Grid System - http://www.designinfluences.com/fluid960gs/
It lets you nicely organize content divs in a horizontal grid that takes up 100% of the browser's width.
Typically this type of question is not encouraged on stack overflow due to the fact that you didnt actually present a problem. However there is a very good css coder who has solved this for you. Here is a link the download for you to try.
http://matthewjamestaylor.com/blog/ultimate-1-column-full-page-pixels.htm
Set width to a percentage and min-width for fixed size on 1024 monitors:
#main {
width: 95%;
min-width: 990px; /* I suggest a number around 990, due to scroll bar width, experiment at will or use javascript to apply dynamically */
To align the site centered, use an automatic horizontal margin:
margin: 0 auto;
}
Note: You need to apply these to a div directly beneath the body (The body itself cannot change size)
<body>
<div id=main>
<div class="header">content</div>
<div class="side-bar">content</div>
<div class="container">content</div>
</div>
</body>
Edit: Ah I see what you mean, fluid with maximum width, most of the aforementioned stands, change 95% to 100% and min to max:
#main {
width: 100%;
max-width: 990px;
margin: 0 auto;
}
I currently have a div with width:auto to fill the entire screen width but I want to put a side bar on the right hand side.
When I float the width:auto div left and fixed width div to the right it goes under instead.
I'm basically looking for something similar to what reddit have with there search bar on the right width the content auto adjusting to the page width.
Thanks
You can make it like this:
Say you have those 2 divs inside a parent container, which expands to fit the page:
<div id="container">
<div id="autowidth">text expands her...</div>
<div id="fixed">This is a fixed column</div>
</div>
In your CSS:
#container {
width:100%;
border:1px solid black;
padding-right:200px;
}
#autowidth{
width:100%;
background-color:red;
float:left;
}
#fixed{
width:200px;
background-color:green;
float:right;
margin-right:-200px;
}
Basically, the parent container holds everything together. It has a padding of 200px (the width of the right col), so that its content doesnt goes beyond that point. In turn, the right col has a margin of -200px, so that it forces the boundaries imposed by the parent padding and places itself always at the foremost right. The other div, actually, now has only the spaces provided by the parent container, constrained by its padding, so its 100% would be, in fact, (100% - (parent's padding)). You can see a working result of this here: jsfiddle.
I'm pretty sure there might be more elegant solutions out there, so bear with me.
if you want to give a background, like it were 2 cols, you can go for the classical 'faux columns' background (see example at a list apart )
You don't strictly need a container div. I did css inline for brevity.
<div style="float:right; width:14em; background-color:#CCC;">
<p>This div is fixed-width.</p>
</div>
<div style="background-color:#EEE; margin-right:14.5em;">
<p>This div is auto-width.</p>
</div>
The answer doesn't work for me, I think it's outdated. Now you have to specify box-sizing: border-box for padding to count to width, but thanks for inspiration. This is my solution.
#autowidth {
float:left;
width:100%;
padding-right:200px;
box-sizing:border-box;
}
#fixed {
float:right;
width:200px;
margin-left:-200px;
}
I have a layout like so:
<div class='foo'>
<div class='bar'>
<div class='baz'>
Content stuff...<br/>
Content stuff...<br/>
Content stuff...<br/>
Content stuff...<br/>
</div>
</div>
</div>
with CSS like so:
.foo{
position:absolute;
left:20px;
top:20px;
}
.bar{
width:0px;
border-left:1px solid blue;
border-right:1px solid yellow;
}
.baz{
padding-left:35px;
padding-right:27px;
}
... a pretty standard way to get a full height columns. But I also need bar to be a fixed width (in this case 0px). Is there any way to get the content div, baz, to have its old width (when bar had auto width), and still keep bar full height?
Using CSS alone, I don't think so; At least none I can't think of.
Why not set the width to auto in CSS, using jQuery you can set the width to a variable, and then you can set the width to 0px...
That way you've got a variable that you can set .baz to.
Am I making sense?