I need to clear a section after a div has class name last. For some reason I couldn't edit my html. I need to achieve it using just css.
My Html code:
<div class="column">test<br />test</div>
<div class="column">test</div>
<div class="column">test</div>
<div class="column last">test</div>
<div class="column">test<br />test</div>
<div class="column">test</div>
<div class="column">test</div>
<div class="column last">test</div>
Css:
.column{ width:250px; margin-right:10px; float:left;}
.column.last{ margin-right:0px;}
Any help?
.column.last:after {
visibility: hidden;
display: block;
font-size: 0px;
content: " ";
clear: both;
height: 0px;
line-height: 0px;
}
This is known as "clearfix."
Use a div to clear the float. ;)
.column{ width:24%; margin-right:1%;float:left;background:grey;margin-bottom:20px;}
.column.last{ margin-right:0px;}
.clear {clear:both;}
<div class="column">1<br />2</div>
<div class="column">3</div>
<div class="column">4</div>
<div class="column last">5</div>
<div class="clear"></div>
<div class="column">6<br />7</div>
<div class="column">8</div>
<div class="column">9</div>
<div class="column last">10</div>
http://jsfiddle.net/vinicius5581/YMf2j/7
Related
I have the following div arrangement, with the below css. Everywhere online seems to say you need margin:0 auto; for centering, but the text still goes to the top right,
Any help appreciated.
.menu_item {
margin: 0 auto;
}
<div style='position:absolute;width:110%;height:110%;left:-5%;top:-5%;background-color:white;z-index:7;overflow:none;'>
<div id='menu_but' style='width:36px;height:36px;'>
<div class='menu_line' />
<div class='menu_line' />
<div class='menu_line' />
</div>
<div id='menu'>
<div class='menu_item'>HOME</div>
<div class='menu_item'>ABOUT US</div>
<div class='menu_item'>CONTACT US</div>
<div class='menu_item'>PORTFOLIO</div>
</div>
</div>
First of all, <div> is not a self-closing tag so you have to write </div> instead of <div class='menu_line'/>
Then, you could simply do:
<style>
.menu_item{
display: inline-block;
}
#menu {
position: relative;
text-align: center;
}
</style>
<div id="menu">
<div class="menu_item">HOME</div>
<div class="menu_item">ABOUT US</div>
<div class="menu_item">CONTACT US</div>
<div class="menu_item">PORTFOLIO</div>
</div>
maybe use flexbox ?
.parent {
display:flex;
justify-content:center;
align-items:center;
}
All of the child elements will be centered
I'm trying to center a bunch of divs with a fixed size. I want it to work with a relative/unspecified window size. The code below works so long as the divs don't wrap around to the next line. As soon as they wrap, everything gets aligned to the left. The plan is to dynamically generate lots of these and have it be vertically scrollable only. My CSS skills are pretty weak. Any advice? Thanks in advance.
.container {
margin: 0 auto;
display: table;
}
.block {
background: #999;
float: left;
width: 50px;
height: 50px;
margin: 5px;
}
<html>
<head>
</head>
<body>
<div class="container">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<!--
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
<div class="block">8</div>
<div class="block">9</div>
<div class="block">10</div>
<div class="block">11</div>
<div class="block">12</div>
<div class="block">13</div>
<div class="block">14</div>
<div class="block">15</div>
-->
</div>
</body>
</html>
You can use display:inline-block; instead of float:left and then give text-align:center; to their parent and don't forget to remove extra spaces which is occurred by display:inline-block;
.container {
margin: 0 auto;
display: table;
text-align:center;
}
.block {
background: #999;
/* float: left; */
display:inline-block;
width: 50px;
height: 50px;
margin: 5px;
}
<html>
<head>
</head>
<body>
<div class="container">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
<div class="block">8</div>
<div class="block">9</div>
<div class="block">10</div>
<div class="block">11</div>
<div class="block">12</div>
<div class="block">13</div>
<div class="block">14</div>
<div class="block">15</div>
</div>
</body>
</html>
#create-summary {
width: 200px;
height:150px;
margin-top:20px;
overflow-x:auto;
overflow-y:auto;
}
.lv2 {
margin-left:15px;
}
.lv3, .lv4, .lv5, .lv6{
margin-left:15px;
}
#create-summary div {
border:1px solid red;
}
<div id="create-summary">
<div class="lv1">
1. Title1
<div class="lv2">1.1. Title1.1</div>
<div class="lv2">
1.2. Title1.2
<div class="lv3">1.2.1. Title1.2.1</div>
<div class="lv3">
1.2.2. Title1.2.2
<div class="lv4">
1.2.2.1. Title1.2.2.1
<div class="lv5">1.2.2.1.1. Title1.2.2.1.1</div>
</div>
<div class="lv4">1.2.2.2. Title1.2.2.2
<div class="lv5">1.2.2.2.1. Title1.2.2.2.1</div>
<div class="lv5">1.2.2.2.2. Title1.2.2.2.2
<div class="lv6">1.2.2.2.2.1 Title1.2.2.2.2.1</div>
</div>
</div>
</div>
</div>
</div>
</div>
As you can see the
class "lv6" and class"lv5" is not display correctly even I set overflow-x:auto.
How to set overflow:x auto to make it correctly?
You mean like that?
#create-summary {
width: 180px;
height:200px;
margin-top:20px;
overflow-x: auto;
}
.lv2 {
margin-left:15px;
}
.lv3, .lv4, .lv5, .lv6{
margin-left:15px;
white-space: nowrap;
}
<div id="create-summary">
<div class="lv1">
1. Title1
<div class="lv2">1.1. Title1.1</div>
<div class="lv2">
1.2. Title1.2
<div class="lv3">1.2.1. Title1.2.1</div>
<div class="lv3">
1.2.2. Title1.2.2
<div class="lv4">
1.2.2.1. Title1.2.2.1
<div class="lv5">1.2.2.1.1. Title1.2.2.1.1</div>
</div>
<div class="lv4">1.2.2.2. Title1.2.2.2</div>
</div>
</div>
</div>
</div>
You need to make the whole div larger, Or you can set overflow-x to scroll.
#create-summary {
width: 250px;
height:200px;
margin-top:20px;
}
.lv2 {
margin-left:15px;
}
.lv3, .lv4, .lv5, .lv6{
margin-left:15px;
}
#create-summary div {
border:1px solid red;
}
<div id="create-summary">
<div class="lv1">
1. Title1
<div class="lv2">1.1. Title1.1</div>
<div class="lv2">
1.2. Title1.2
<div class="lv3">1.2.1. Title1.2.1</div>
<div class="lv3">
1.2.2. Title1.2.2
<div class="lv4">
1.2.2.1. Title1.2.2.1
<div class="lv5">1.2.2.1.1. Title1.2.2.1.1</div>
</div>
<div class="lv4">1.2.2.2. Title1.2.2.2</div>
</div>
</div>
</div>
</div>
Add CSS white-space: nowrap; to lvl elements.
When using "position:fixed;" in my stylesheet, can I have the position also be on the right? Here's my code:
CSS
.buttons {
margin-bottom: 30px;
text-align: right;
position:fixed;
}
HTML
<div id="main">
<div class="container">
<div class="buttons">
<button class="nav-toggler toggle-slide-left">Menu</button>
</div>
</div>
</div>
Yes, you just need to add 'right: 0;' to your .buttons CSS class.
DEMO
<div id="main">
<div class="container">
<div class="buttons">
<button class="nav-toggler toggle-slide-left">Menu</button>
</div>
</div>
</div>
.buttons {
margin-bottom: 30px;
text-align: right;
position:fixed;
right:0px;//add this
}
I want the inner div to flow to top automatically.Like Pintrest UI
http://jsfiddle.net/zbbHc/127/
HTML
<div class="wrapper">
<div class="iB">Content<br>Content<br>Content<br></div>
<div class="iB">Content<br>Content<br>Content<br>Content<br>Content<br>Content<br></div>
<div class="iB">Content<br>Content<br>Content<br></div>
<div class="iB">Content<br>Content<br>Content<br>Content<br></div>
<div class="iB">Content<br>Content<br>Content<br>Content<br></div>
<div class="iB">Content<br>Content<br>Content<br></div>
<div class="iB">Content<br>Content<br>Content<br>Content<br></div>
</div>
CSS
.wrapper {
width: 100%;
background: red;
text-align: center;
}
.iB {
display:inline-block;
vertical-align:top;
width: 200px;
background: green;
}
If you are generating the HTML dynamically, just comment out the white space between the inline divs when you are generating the code.
Demo
<div class="wrapper">
<div class="iB">Content<br>Content<br>Content<br></div><!--
--><div class="iB">Content<br>Content<br>Content<br>Content<br>Content<br>Content<br></div><!--
--><div class="iB">Content<br>Content<br>Content<br></div><!--
--><div class="iB">Content<br>Content<br>Content<br>Content<br></div><!--
--><div class="iB">Content<br>Content<br>Content<br>Content<br></div><!--
--><div class="iB">Content<br>Content<br>Content<br></div><!--
--><div class="iB">Content<br>Content<br>Content<br>Content<br></div>
</div>
Using display: block; in conjunction with float: left; omits this problem. But that'll require some additional efforts to center the whole cluster.
Another workaround is masking the line breaks:
<div class="iB">Content<br>Content<br>Content<br>Content<br></div><!--
--><div class="iB">Content<br>Content<br>Content<br></div><!--
--><div class="iB">Content<br>Content<br>Content<br>Content<br></div>
Add font-size:0 to the parent element. Don't forget to define the font-size for child elements:
.wrapper {
font-size: 0px;
}
.iB {
font-size:15px;
}
Demo here
I believe you're looking for margin-left:-4px;
.iB {
display:inline-block;
margin-left:-4px;
}
http://jsfiddle.net/daCrosby/zbbHc/128/
To remove the spacing on top, you have to either use JavaScript, or reformat your everything into columns. This has some drawbacks, but it is a JS-free solution.
HTML
<div id="hold">
<div class="wrapper">
<div class="iB">Content<br />Content<br />Content<br /></div>
</div>
<div class="wrapper">
<div class="iB">Content<br />Content<br />Content<br /></div>
</div>
<div class="wrapper">
<div class="iB">Content<br />Content<br />Content<br /></div>
</div>
</div>
CSS
#hold{
width:100%;
}
.wrapper {
float:left;
width: 33%;
}
.iB {
display:block;
}
http://jsfiddle.net/daCrosby/zbbHc/131/