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.
Related
How can I set margin for div inside column div in bootstrap, like in the code I am trying to make margin 5px but it doesnt work!
<div class="container bg_red">
<h1>Test DIV boxes</h1>
<div class="row">
<div class="col-md-3 thin_border bg_green">
<div class="bg_blue">
Some content here for panel 1
</div>
</div>
<div class="col-md-9 thin_border">
Some content here for panel 2
</div>
</div>
</div>
Is this what you wanted? Check the margin-5 class that is added to one div and not the other so you can see the difference.
.thin_border {
border: 1px solid #EFEFEF;
}
.margin-5{
margin: 5px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container bg_red">
<h1>Test DIV boxes</h1>
<div class="row">
<div class="col-md-3 thin_border bg_green">
<div class="bg_blue margin-5">
Some content here for panel 1
</div>
</div>
<div class="col-md-9 thin_border">
Some content here for panel 2
</div>
</div>
</div>
I have seen a lot posts about this, I know it's simple but I cannot get my example to work and I would like to understand why as I still did not grasp the concept of positioning in CSS.
I am using simple bootstrap in my App. I have a container with row and col-md-6. My code looks like this.
<section id="automat" class="box bg-light-grey">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="images/iPod.png" class="scaleImage"/>
</div>
</div>
</div>
</section>
And my custom css style for image looks like this (depending on screen size I will control the size of img element).
.scaleImage {
width:300px;
height:auto;
position:relative;
margin:0 auto;
}
As you can see, I have tried to set the exact width of my element, with position:relative and margin:0 auto. According to the other posts, this is supposed to be enough to center my element inside my container, but it's not. It is still locked on the very left side of my col-md-6 container.
My question is following: Why my solution is not working and how do I need to change my code to get this to work?
Is this working?
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 text-center">
<img src="images/iPod.png" class="scaleImage" style="width:100%;height:100%"/>
</div>
<div class="col-md-3"></div>
</div>
</div>
You can try like this,
section{
background: gray;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="automat" class="box bg-light-grey">
<div class="container text-center">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="https://www.sfu.ca/content/sfu/publicsquare/_jcr_content/below-nav/parsys/image.img.jpg/1406566003083.jpg" class="scaleImage" />
</div>
</div>
</div>
</section>
You can use bootstrap class 'text-center' to center. So, you do not need to use margin:0 auto.
Here you have defined an offset too. You do not need offset to center a div.
.scaleImage {
width:300px;
height:auto;
position:relative;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="automat" class="box bg-light-grey">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<img src="https://d3nevzfk7ii3be.cloudfront.net/igi/tcbxa1Eb6YMETIW2.large" class="scaleImage"/>
</div>
</div>
</div>
</section>
margin: 0 auto would not work because image is inline-block element (look: Why doesn't margin:auto center an image?)
To align image do text-align: center on parent div or <div class="container text-center">.
try to add one more class, text-center to col-md-6. It will center align the content.
position:relative;
float:none;
width:100%;
max-width:300px;
margin:auto;
DISPLAY:BLOCK
so to center your element in the middle you need this combination of css properties
I found this popular stackoverflow post (see also jsFiddle), which covers exactly my problem. But after applying this solution to my MWE, see on bootply, it still doesn't work. Why is it not working?
HTML:
<div class="container">
<h1>Hello!</h1>
<div class="row">
<div class="col-sm-3" style="background-color:yellow;">
<div class="outer">
<div class="inner">
<p>hello</p>
<br>
...
</div>
</div>
</div>
<div class="col-sm-9" style="background-color:pink;">
<p>hello once</p>
</div>
</div>
CSS:
.inner {
height:200px;
overflow-y: auto;
}
.outer{
overflow:hidden;
}
To get the effect within a bootstrap column, you can set the right margins to a minus value and thereby hide the scrollbar.
Also, add some more content so you've got something to scroll!
.inner {
height:200px;
overflow-y: auto;
margin-right:-15px;
}
.outer{
overflow:hidden;
margin-right:-15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<h1>Hello!</h1>
<div class="row">
<div class="col-sm-3" style="background-color:yellow;">
<div class="outer">
<div class="inner">
<p>hello</p>
<br>
...
<p>hello</p>
<br>
...
<p>hello</p>
<br>
...
<br>
...
<p>hello</p>
<br>
...
</div>
</div>
</div>
<div class="col-sm-9" style="background-color:pink;">
<p>hello once</p>
</div>
</div>
I tried the following html code (an example from w3schools site):
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;margin-top:20px">
Copyright © W3Schools.com
</div>
</div>
</body>
</html>
And this is the output:
I need to add a space between the sections #footer and #content, and as you can see I tried using the margin-top attribute, but any value I use (in my example 20px) does not change the result: there is no space between the two sections.
How can I solve this problem?
Another reason why floats suck as much as they rock.
You can add an empty div in between the footer and the content like...
//content html
<div style='clear:both;'></div>
//footer html
http://jsfiddle.net/rK5zV/1/
Or you can make the footer a float also with a width of 100% like...
http://jsfiddle.net/7KZy9/
Other solutions can be found here...
Why top margin of html element is ignored after floated element?
You can add to content margin-bottom:20px;
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;margin-bottom: 20px;">
You can place all your elements apart from the footer in a wrapper that has margin-bottom: 20px:
<body>
<div id="container" style="width:500px">
<div id="wrapper" style="margin-bottom: 20px; border: 1px solid black; width: 100%; float: left;">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here
</div>
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com
</div>
</div>
</body>
Here is a jsFiddle that demonstrates the behavior.
I gave your footer relative positioning and used the top attribute
Here is a working DEMO
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here
</div>
<div id="footer" style="background-color:#FFA500;clear:left;text-align:center;position:relative;top:20px">
Copyright © W3Schools.com
</div>
</div>
Try making footer display: inline-block; width: 100%. It's not ideal, but it works.
After two blocks with styles float you should to use element with style cler:both;
You code view like this
<div id="content">
...
</div>
<div style="clear:both;"></div>
<div id="footer">
...
</div>
I'm trying to replace some layouts table layouts with css layouts and have this code:
<html>
<head>
<style type="text/css">
#grid{
border:solid;
border-width:1px;
border-color:#000000;
width:300px;
max-width:300px;
min-width:300px;
overflow:hidden;
font-size:14px;
}
#grid .item{
text-align:center;
width:33%;
margin-top:2px;
margin-bottom:2px;
float:left;
}
</style>
</head>
<body>
<div id="wagerStream">
<div id="grid">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
<div class="item">item6</div>
<div class="item">item7</div>
<div class="item">item8</div>
<div class="item">item9</div>
</div>
<div id="grid">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4 with wrapping text</div>
<div class="item">item5</div>
<div class="item">item6</div>
<div class="item">item7</div>
<div class="item">item8</div>
<div class="item">item9</div>
</div>
</div>
</body>
</html>
As you can see I have a problem with the way the last three items display when wrapping text occurs and would to know what would be a good css solution.
set additional two styles on item class:
white-space: nowrap;
overflow: hidden;
That should do the trick.
You will need to specify a height to the .item. Because floating elements always set their height to the minimum they need.
So, add the following line to your .item
height:<amount>px;
The only solution I could think of without using JavaScript and without specifying a set height to your items, is to wrap every 3 items in a row.
<div id="grid">
<div class="item-row">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
</div>
<div class="item-row">
<div class="item">item4 with wrapping text</div>
<div class="item">item5</div>
<div class="item">item6</div>
</div>
<div class="item-row">
<div class="item">item7</div>
<div class="item">item8</div>
<div class="item">item9</div>
</div>
</div>
You'd want to have overflow:hidden applied to item-row to contain the floated items.