I am trying to float multiple divs (2 pictured, another will be added later). The problem is that the site container seems to ignore them when set to auto. I am not sure if this is something wrong with the container css, or the css used to with the divs. How would I go about getting the site container to recognize the floats? Thanks in advance.
Relevant HTML:
<div id="storehours">
<div id="hoursheader"><p>Shop Hours</p></div>
</div>
Relevant CSS:
#storehours {
border: 1px solid black;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
margin-left: 11px;
margin-bottom: 15px;
width: 250px;
height: auto;
float: left;
}
(That code is for the div on the right, the left one is the same but contains the form, which I don't think is the problem.)
Edit: Updated with clears and fixed cap letter. Still having the same problem.
Edit2: For clarification. The html is within the container that also contains the google maps. As you cans see, the floats cause the container to ignore them and they start at the bottom of the container. I could potentially fix the problem by setting a height on the container instead of leaving it auto, but is that good practice?
You should add overflow:hidden; on the style of the container <div id="storehours">
.
It is because you are not clearing your floats use this
<div style="clear: both;"></div>
Related
I made this design, that contains 2 types of content boxes, one which contains pictures and one that doesn't. All the boxes that don't have a picture have the same size. And the bottom margin should also be equal like this:
But because the boxes with pictures are bigger, and I'm using "float" the bottom boxes are being placed according to the bottom margin of the biggest box at the top, which causes it to leave a lot of blank space in between.
Is there any way to float the bottom boxes under the small boxes? I have tried both with floats and "displays" but nothing seems to work.
This is my code:
<div class="contentBox">
<div class="contentBoxHead">
</div>
<div class="contentBoxPicture">
<img src=" /categoria/articulo/images/" />
</div>
<div class="contentBoxDescription">
<h2 class="contentBoxDescriptionText">
</h2>
<h3 class="contentBoxDescriptionText">
</h3>
</div>
</div>
...
.contentBox{
width: 300px;
float: left;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
}
I have removed all the CSS related to the inner child divs of "contentBox" for it doesn't seem to be the problem here.
Please note that this is for a CMS type of site and I am trying to make this work the same way if all the boxes have pictures or not, and even if the order is completely different. For that reason I can't hardcode the positions.
I don't believe this is achievable with CSS only solution. But this is basically so called masonry layout. You can achieve it with e.g. this JavaScript library: http://masonry.desandro.com/
put the divs with content in one div and image one in another div.
for ex.
<div class="content_description">
<div class="content_1"></div>
<div class="content_2"></div>
</div>
<div class="content_image">
<img src=""></img>
</div>
and then put css like
.content_description {
width : 300px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
}
.content_image {
width: 300px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
}
cover all of this with another div where you define your float left.
If you don't need very fine control over the content flow then you can use CSS columns. I prepared a little demo for you where you can see there is no float, content is wrapping, height is properly preserved.
Demo: http://jsbin.com/pesoto/edit?html,css,output
Have fun and explore CSS3 features, theres a lot of good stuff there. :)
I'm trying to have a toolbar always aligned to the right within a DIV without adding any height. The problem I'm finding is making this work both when the box has 100% width and when the width is determined by content. The HTML looks something similar to this:
<div class="box">
<div class="title">
float right
</div>
<div class="toolbar">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
</div>
</div>
I managed to make it work in Firefox, but Chrome wraps the toolbar when there is not enough space for it instead of increasing the width of the container.
.box {
border: 1px solid #ccc;
display: inline-block;
margin: 5px 0 15px;
}
.title {
display: inline-block;
}
.toolbar {
background: #eee;
float: right;
margin-left: 25px;
}
I would like to find a single set of rules to achieve this regardless the width of the container, but I'm out of ideas unless I use some extra class to differentiate both cases. Also, I'm trying to avoid using overflow or clearfix because I don't want the toolbar to affect the height of the box.
In this fiddle I show all combinations I have tried: http://jsfiddle.net/omegak/c4y4t/2/
You can try this, This worked for me.
.title {
float:left;
}
See if this is the desired output
Updated the below css and added clearfix class to the parent div
.title {
float:left;
}
Add the following CSS and clear the floats on first Div.
.title {
float:left;
}
Here is the demo
I got it working in the end with a little hack.
I gave up on trying the title not to be float: left. Then, to prevent the box to have no height I added overflow: hidden to it. Finally, the hack consists on setting margin-bottom: -999px on the toolbar to prevent it from adding any extra height to the box.
Here is the solution: http://jsfiddle.net/c4y4t/8/
I have been developing a site using absolute height values and was curious as to why height:auto isn't working for me, can anyone shred some light on this.
HTML Structure
<div id="site-content">
<div id="menuconatiner"></div>
<div id="review-container"></div>
</div>
CSS
#site-content{
webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 0 auto;
width: 938px;
padding-bottom:20px;
background-color:white;}
#menuconatiner{
margin:5px;
float:left;
width:190px;}
Use the following CSS and you wont need the height attribute anymore.
#reviews-content {
display: table;
}
The reason why your div isn't auto expanding in height is because it contains floating elements, but you're not using a clearfix. This might be useful links:
What is a clearfix?
http://nicolasgallagher.com/micro-clearfix-hack/
My solution above might solve your problem now, but I suggest using a clearfix in the future.
As mentioned in my earlier comment in the OP, the issue is because both the child elements of the div are floated. When an element is floated, its parent no longer contains it because the float is removed from the flow. Since the parent isn't containing the child elements, the height: auto wouldn't work (actually, will work but would have no effect).
Option 1: Remove the float: left on "review-container" and height: auto will work as you expect, but this has some implications as mentioned in JrnDel's comment.
Option 2 (Best): You could add a clearfix div as mentioned in both your own comment in OP and by JrnDel in the comment for this answer.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
CSS properties being passed up to the parent element when the DIV is empty
I'm a newbie for CSS layout design.
What I'd like to do at the moment is that I want to make two Div boxes, one nested inside one another. Anyway, my problem is the top margin I set to the inner box didn't behave the way I wanted.
Pls take the portion of script below for example:
[demo.html]
<html>
<header>
<title>Mock-up page</title>
<link href="stylesheets/demo.css" rel="stylesheet" type="text/css">
</header>
<body>
<div id="box1">
<div id="box2">div 2</div>
</div>
</body>
</html>
[demo.css]
#box1{
width: 300px;
height: 300px;
background-color:#0000FF;
}
#box2{
margin-top: 30px;
background-color:#008000;
}
The effect it produced was it only pushed the outer box 30px down from body tag (left-sided in the picture), which wasn't what I had expected (right-sided in the picture).
What was the reason why this happened and how to correct the styling?
Change the margin-top to padding-top will do what you want.
This is a know issue in many browsers.
When the first child of an element has a margin-top (no content before it) the margin overflow the top of the parent element and pushes it like in your case.
Other solutions exists, but all of them are a bit hacky:
Apply a position: relative to the child and change the margin-top to a margin-bottom and apply top: 20px;;
Create an element before the inner box with some content ( can be used here) with height: 0; and overflow: hidden;;
Set a border-top: 1px solid transparent or the same color of the background of the element (in this case, pay attention that the border is added to the height of the object;
and so on...
You could add position: relative to #box1 and position: absolute to #box2.
See this example
CSS Positions Explained
CSS
#box1{
display:block;
width: 300px;
height: 300px;
background-color:#0000FF;
border:solid transparent 1px;
}
#box2{
margin-top: 30px;
background-color:#008000;
}
HTML
<div id="box1">
<div id="box2">div 2</div>
</div>
If you keep the outer box empty (no text node) then it's doing this behavior and to be honest I didn't understand why, but I found it here why it does so and it's known as collapsed margin and I've added border:solid transparent 1px; to soleve the issue but alternatively you can use padding for outer DIV. Here is also an answer on SO.
Demo.
This article by Chris Coiyer does a good job of explaining box-sizing. Understanding that will help you.
I'm making a website and want it to appear as a grid of boxes and rectangles.
I have a 6x6 grid of relatively-alined left-float divs. They work fine and fit neatly in a 900 width wrapper div. If i want a horizontal rectangle, i simply make one of these squares twice as wide (accounting for margins between, but that's irrelevant) and delete the one next to it. No problem.
The issue I have comes in when I want to make a rectangle twice as TALL. it ends up bumping everything left of it in the same row as it a line down. The same happens with a square twice as large (2x2 grid units).
Here's the code in jsfiddle:
http://jsfiddle.net/zucw9/
Essentially, how can I get either 8,9, and 10 to shift up one space, or for 6,7, and 8 to move into that gap, leaving 9 and 10 where 6 and 7 are right now?
http://jsfiddle.net/zucw9/10/
This solution isn't a very good solution but it works.
(I changed some of the names so i could read it better. (.grid_rect_tall became .grid_tall etc. margin-left:10px; margin-right: 0px etc.. became margin: 5px;)
basically you specify a -ve margin-bottom for the tall one and an extra margin so the other elements don't overlap.
.grid_square, .grid_long, .grid_tall
{
float: left;
margin: 5px;
background: #6CC;
}
#main{
position: relative;
width: 905px;
overflow: hidden;
border: 1px solid black;
padding: 5px;
}
.grid_square{
width: 140px;
height: 140px;
}
.grid_long{
width: 290px;
height: 140px;
}
.grid_tall{
width: 140px;
height: 290px;
margin-bottom: -150px;
}
.rbuffer
{
margin-right: 155px;
}
.lbuffer
{
margin-left: 155px;
}
I'd still go with my comment though and use either: http://960.gs or css3 grid layout: http://w3.org/TR/css3-grid-layout
EDIT:- I thought i better put a why to my comment earlier that this is not a good solution. Simply put: if you want to change the layout of the page you will have to change the classes on the items as well as having to change the css.
Also created one with even more elements to show the possibilities: http://jsfiddle.net/zucw9/11/ (or in em instead of px because i was bored. http://jsfiddle.net/zucw9/15/)
The layout is standard, how it should be displayed. I would recommend to use another div which wraps up the dives that appear before the taller div. This is not a very flexible solution though.
Edit: Move
<div class="grid_square">8</div>
<div class="grid_square">9</div>
<div class="grid_square">10</div>
higher in hierarchy after
<div class="grid_square">2</div>
should fix it.
i hope your thinking like below
code:
<div id="main">
<div class="grid_square">1</div>
<div class="grid_rect_long">2</div>
<div class="grid_rect_tall">3</div>
<div class="grid_square">4</div>
<div class="grid_square">5</div>
<div style="clear:both"></div>
<div>
<div class="grid_square">6</div>
<div class="grid_square">7</div>
<div class="grid_square">8</div>
<div class="grid_square">9</div>
<div class="grid_square">10</div>
</div>
</div>