I have two fixed-width divs, first one 'main box' and the other 'other box'
I want them center-screen
and,
when browser-width permits, next to one another.
I achieve the latter by making them float:left but then since they're "out of the flow" I can't make them center screen (by margin: auto on outer div)?
Is it possible some other way?
Please see demo:
http://jsbin.com/jitus/1
When you set .a and .b to inline-block elements, you can set their parent to text-align center. Then this is your requirement.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.tc{text-align:center;}
.a, .b{display:inline-block; width:300px; *display:inline; *zoom:1;}
.a{background:blue;}
.b{background:red;}
</style>
</head>
<body>
<div class="tc">
<div class="a">aaa</div>
<div class="b">bbb</div>
</div>
</body>
</html>
If I understood the question right HERE you can find a fiddle
#cont{
margin: 0 auto;
max-width:600px;
}
#a{
width:300px;
height: 300px;
background:red;
float:left;
}
#b{
width:300px;
height: 300px;
background:lime;
float:left;
}
HTML:
<div id="cont">
<div id="a"></div>
<div id="b"></div>
</div>
Related
I have 3 columns in css aligned beside each other. I don't understand why when I zoom into the browser the UI becomes responsive? For example when I zoom in the browser, <p>helooooo<p/> will enlarge only in respect to the column. On zooming in notice how the columns remain at their specified width? why does that happen? shouldn't the columns also expand in respect to the text?
body, html{
width:100%;
height:100%;
margin: 0px;
padding:0px;
}
.col1{
min-width:30%;
height:100%;
background-color: gray;
float:left;
}
.col2{
min-width:40%;
height:100%;
background-color: blue;
float:left;
}
.col3{
min-width:30%;
height:100%;
background-color: red;
float:left
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="col1">
<p>heloooooooooooooo</p>
</div>
<div class="col2">
<p>heloooooooooooooo</p>
</div>
<div class="col3">
<p>heloooooooooooooo</p>
</div>
</body>
</html>
Your example doesn't show any change when zooming in or out. But anyway, when the browser zooms, it's essentially changing the width of the viewport.. so if you have media queries, they will come into play.
This because you have set the column lengths to a specific value.
min-width:40%;
height:100%;
So whether you zoom or not, it will be of the same percentage. meaning it wont be zoomed.
I am trying to overlay a img with a div using negative margin on the div, the text inside the div is displayed over the image, while the background of the div is being displayed under the img .
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="a">
<div class="b"><img src=""/></div>
<div class="c">somebody</div>
</div>
</body>
</html>
css:
.a{
height:60px;
background:#ccc;
}
.b img{
height:60px;
width:60px;
background:red;
}
.c{
background:blue;
height:20px;
margin-top:-20px;
}
i have observed this behavior in IE9 and chrome.
is this behavior as expected?
if yes, what is the reason?
I could make the div absolute or relative to achieve what i am trying to do, but i am not able to understand this behaviour.
http://jsbin.com/gejuzuza/1/edit
If you add position: relative; to your CSS for .c, it will put the div with the c class above the div with the b class
Help! anyone knows how to fix this issue in div layout?
i am trying to make a div layout which is not will going to overflow when the web browser is zoom in or out,
here is my example, when i zoom in the webbrowser it come's to..,
the "header right" going down at the left side of the "header left", what i want is the div "header left","header center","header right" is continue zoom in and there is scrorable in bottom so the content inside the div will not have an overflow, something like this...,
here is my code;
**HTML**
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Help Div Fix</title>
<link type="text/stylesheet" href="css_layout.css">
</head>
<body>
<div id="header_div">
<div id="header_left">Header Left</div>
<div id="header_center">Header center</div>
<div id="header_right">Header Right</div>
</div>
</body>
</html>
**CSS**
body{
margin:0;
background:#EEF4F9;
}
#header_div{
width:100%;
float:left;
}
#header_left{
float:left;
height:50px;
width:330px;
background:#00F;
}
#header_center{
float:left;
height:50px;
width:330px;
background:#999;
}
#header_right{
float:left;
height:50px;
width:330px;
background:#666;
}
Add Minimum width for your parent header class.
#header_div{
width:100%;
float:left;
min-width:990px;
}
JSFIDDLE DEMO
Set the left, center, right divs to width: 33%; and min-height: 50px;.
I would like to let float some div with a fixed size, let's say 300px.
I took the example from Center floating DIVs
and I insert the size of the div.
They work OK but when I re size the screen (getting it smaller) they are not anymore in the center.
Moreover I also would like to have some space between the div.
Thanks in advance.
Here the actual code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Center Div</title>
<style type="text/css">
#container
{
text-align:center;
margin:0 auto;
display:table;
}
#container div
{
float:left;
padding:5px;
display:cell;
width: 300px
}
</style>
</head>
<body>
<div id="container">
<div style="background-color:yellow">Text ffffffffffff1<p>ddd</p>
<p>r </div>
<div style="background-color:lightgreen">Text fffffffffffff2<p>ddd</p>
<p>v</div>
<div style="background-color:lightblue">Text fffffffffffffff3<p>ddd</p>
<p>b</div>
</div>
</body>
</html>
If you don't want your block to fall to the next 'row' when screen is narrow - set a min-width to your container and also set overflow to auto - to trigger scroll.
FIDDLE
#container
{
text-align:center;
margin:0 50px;
min-width: 1036px;
overflow: auto;
}
#container div
{
padding:5px;
display:inline-block;
width: 300px;
margin: 10px;
}
Could you please try it:
Remove float: left and add display: inline-block in #container div
Ok, I am basically building a fluid layout.
My HTML is like this:
<div id="container">
<div class="box" id="left">Left</div>
<div class="box" id="center">This text is long and can get longer</div>
<div class="box" id="right">Right</div>
<div class="clear"></div>
</div>
Here is the css:
#container{
width: 100%;
}
.box{
float: left;
}
#left, #right{
width: 100px;
}
#center{
width: auto; /* ? */
overflow: hidden;
}
.clear{
clear:both;
}
What I need to know is how do I get the #center to re-size when #container is re-sized without the elements moving underneath each other.
Try these corrections (just simple floating elements, no need to set absolute elems or paddings)
just added a new fiddle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fluid layout</title>
<style>
/*class to set the width of the columns */
.floatbox{
width:100px;
}
#container{
width: 100%;
float:left;
}
#left{
float:left;
}
#right{
float:right;
}
#center{
overflow: hidden;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div id="container">
<!-- floating column to the right, it must be placed BEFORE the left one -->
<div class="floatbox" id="right">Right</div>
<div class="floatbox" id="left">Left</div>
<!-- central column, it takes automatically the remaining width, no need to declare further css rules -->
<div id="center">This text is long and can get longer</div>
<!-- footer, beneath everything, css is ok -->
<div class="clear"></div>
</div>
</body>
</html>
#container also must be floated (or with overflow: auto/hidden) to achieve it.
I strongly suggest you use some of the more well known fluid solutions: http://www.noupe.com/css/9-timeless-3-column-layout-techniques.html
The easiest way to do this and completely avoid the float issues that arise would be to
use padding on the container and absolute position the left/right elements in the padding area. (demo at http://www.jsfiddle.net/gaby/8gKWq/1)
Html
<div id="container">
<div class="box" id="left">Left</div>
<div class="box" id="right">Right</div>
<div class="box" id="centre">This text is long and can get longer</div>
</div>
The order of the divs does not matter anymore..
Css
#container{
padding:0 100px;
position:relative;
}
.box{
/*style the boxes here*/
}
#left, #right{
width: 100px;
position:absolute;
}
#left{left:0;top:0;}
#right{right:0;top:0;}
#center{
/*anything specific to the center box should go here.*/
}