How can i fix the problem that makes IE drop last div?
<div>
<div style="float:left; width:25%;"></div>
<div style="float:left; width:50%;"></div>
<div style="float:left; width:25%;"></div>
</div>
this it should be correct, but on older IE it makes last div go on a new line
set below css in your stylesheet
div{
margin:0;
padding:0;
}
It has some padding and margin by default which need to be reset to 0.
Try this:
<div style="float:left; width: 100%;">
<div style="float:left; width:25%;"></div>
<div style="float:left; width:50%;"></div>
<div style="float:left; width:25%;"></div>
</div>
<div style="padding:0;margin:0;">
<div style="float:left;height:200px; width:25%;background:blue;">text</div>
<div style="float:left;height:200px; width:50%;background:yellow;">text</div>
<div style="float:left;height:200px; width:25%;background:green;">text</div>
</div>
Here is Demo http://jsfiddle.net/XabvC/
And are you sure your browser zoom value. It should be 100%. If you use IE 10, you should set Browser mode and Document mode on developer tools (F12)
there could be a space being displayed in a collapsed form try
<div style="font-size:0px">
<div style="float:left; width:25%;"></div>
<div style="float:left; width:50%;"></div>
<div style="float:left; width:25%;"></div>
</div>
Related
I am using bootstrap fluid layout. The layout I desire is as follows:
My html code
<div class="container">
<div class="row-fluid">
<div class="span4 well">span4</div>
<div id="h" class="span8 well ">span8</div>
</div>
<div id='calendar' ></div>
</div>
It gives span4 and span8 column in a row for desktop. On a small device, it puts span4 at the top and displays span8 below it. But, when the screen is resized, I wanted to have span8 at the top and span4 below it.
The solution I tried
<div class="container">
<div class="row-fluid">
<div id="h" class="span8 well pull-right">span8</div>
<div class="span4 well ">span4</div>
</div>
<div id='calendar' ></div>
</div>
It works but it gives following layout for big screen. span4 leaves some margin initially which I want to avoid.
How can I do that?
Try adding this style:
#x{
margin-left: 0px;
}
And updating your html to:
<div class="container">
<div class="row-fluid">
<div id="h" class="span8 well pull-right">span8</div>
<div id="x" class="span4 well">span4</div>
</div>
<div id='calendar' ></div>
</div>
The id is just trumping this portion of the Bootstrap css:
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
Following HTML block:
<html>
<body>
<div style="background-color: #fecfff;">
<div style="float:left;">
<div style="height:40px; width:40px; background-color:Red"> </div>
Karl Mac
</div>
<div>
some comments details<br />
<div style="padding-top: 10px">
links
</div>
</div>
</body>
</html>
Produces following:
How can I have Karl Mac too covered with color of parent container in this 2 column layout?
If I add "overflow:auto", it gets fixed in Firefox and Chrome. But issue persists in IE.
thanks!
As you've done for Chrome & Firefox:
overflow: auto;
To make it work in old IE as well:
overflow: auto; zoom: 1;
zoom enables "hasLayout" in old IE, which resolves many CSS bugs. There are also other ways to enable hasLayout, for more info: http://www.satzansatz.de/cssd/onhavinglayout.html
You need to <div style="clear:both;"><div> in the main div.
<html>
<body>
<div style="background-color: #fecfff;">
<div style="float:left;">
<div style="height:40px; width:40px; background-color:Red"> </div>
Karl Mac
</div>
<div>
some comments details<br />
<div style="padding-top: 10px">
links
</div>
<div style="clear:both;"><div>
</div>
</body>
</html>
Code: http://jsfiddle.net/cCuab/
I have a question about css clear float.
My question is when I declare div{float:left;} to all the page, then in some part, I still want some div display center of the screen, like width:960px;margin:0 auto. How to clear this div's float?
see code in: http://jsfiddle.net/37wnT/ and review in http://jsfiddle.net/37wnT/show/
I need div#nav and div#content these two div center of the screen, but other div still obey the rule float:left;
I have modified your code little bit. take a look.
<html>
<head>
<style>
div.main{float:left;}
#header{width:100%;height:100px;}
#nav{clear:both;width:800px;margin:0 auto;}
.nav{width:200px;text-align:center;font:16px/150%;}
#wrap{width:100%;height:100%;}
#content{clear:both !important;width:960px;height:100%;margin:0 auto;}
.col{width:300px;height:300px;margin:0 10px 0 10px;background:red;display:block;}
</style>
</head>
<body>
<div id="header">
<div id="nav">
<div class="nav main">home</div>
<div class="nav main">info</div>
<div class="nav main">products</div>
<div class="nav main">cantact</div>
</div>
</div>
<div id="wrap">
<div id="content">
<div class="col main" >ds</div>
<div class="col main">ds</div>
<div class="col main">ds</div>
</div>
</div>
</body>
</html>
This is the new jsfiddle
<div id="content">
<div class="col">1</div>
<div class="col" >2</div>
<div class="col" style="clear:left;margin-top:10px">3</div><br> <-- changes here
</div>
I am not sure if this is what you want.
<div style="float:left">
<div class="designerWrapper">
<div class="pageBox">
content
</div>
</div>
</div>
<div style="float:left; margin-left:10px;">
content 2
</div>
<div style="clear:both"></div>
<br /><br />
How do I make the div that holds content 2 100% width? If I set it to 100% width it is too wide, at the moment it expands with it's contents length.
you sould use the table stuff
<div id="outer1">
<div id="outer2">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
css:
#outer1 {display:table;width:600px;height:30px;}
#outer2 {display:table-row;width:600px;height:30px;}
#left {display:table-cell; width:15px;}
#right {display:table-cell; width:auto;}
important there is no floating! because the table display floats the cells automatically.
i didnt test the code hope works.
You can set min-width depend upon your requirement.
later on it will expand with its content
<div style="float:left; margin-left:10px;min-width:110px;">
content 2
</div>
I'm having problems getting several divs to function as two columns. In the code below I want the container (or content) and right to act as two columns.
Both need borders (non-image) where the border in between both should be the same visual width as the outer borders.
Both columns need to have the same height between top and bottom
right should be fixed size
Is this even possible without changing the HTML?
Take the following HTML:
<body>
<div id="top"></div>
<div id="container">
<div id="content">
</div>
</div>
<div id="right">
</div>
<div id="bottom"></div>
</body>
This will do what you want.
Markup
<body>
<div id="top">top</div>
<div id="container">
<div id="content">
content
</div>
<div id="right">
right
</div>
<br style="clear:both" />
</div>
<div id="bottom">bottom</div>
</body>
CSS
#container {border:1px solid blue;}
#content, #right {float:left;}
#content {width:400px; border-right:1px solid blue;}
Doesnt anser your issue fully, as your question is a tad lightweight, but you can position divs however you want. Fiddle here: http://www.jsfiddle.net/ozzy/F3K8k/
Have updated fiddle: http://www.jsfiddle.net/ozzy/F3K8k/1/