While dealing with html code in one of my project I faced one problem in which I have taken one main div as a container,inside which I have taken one sub div in the left position,second one in the right position and third one following in the next row.
Till now my code is running very perfectly as u can see in my code.But i want my third div exactly bottom of my first div of which height is less then my second div.
So,I just want to know that is their any other property in html or css except using "margin-top" property in my third div, by which I can make it possible.
To make it more clear I have given one example below.
I will be more then happy if any one will even bother my question and suggest me anything.Thank you in advance.
<div style="width:500px;">
<div style="width:150px;height:50px;background-color:black;float:left; color:white;">
1st div
</div>
<div style="width:100px;height:100px;background-color:#0CF;float:right;">
2nd div
</div>
<div style="clear:both"></div>
<div style="width:50px;height:50px;background-color:#F00;float:left;">
3rd div
</div>
</div>
You need to start by removing the <div> with clear:both; - this is pushing your third div beneath the other two.
Then add clear:left; to the third div. This causes it to clear any items floated left while ignoring those floated right.
<div style="width:500px;">
<div style="width:150px;height:50px;background-color:black;float:left; color:white;">
1st div
</div>
<div style="width:100px;height:100px;background-color:#0CF;float:right;">
2nd div
</div>
<div style="width:50px;height:50px;background-color:#F00;float:left;clear:left;">
3rd div
</div>
See JSFiddle
You may also want to look at this question on SO, which covers float And clear in more detail.
I am not quite sure what you want exactly, but this is what i understood of it.
Try running this snippet:
<div style="width:500px;">
<div style="width:150px;height:50px;background-color:black;float:left; color:white;">
1st div
</div>
<div style="width:100px;height:100px;background-color:#0CF;float:right;">
2nd div
</div>
<div style="clear:both"></div>
<div style="width:50px;height:50px;background-color:#F00;float:left;position:relative;top:-40px;">
3rd div
</div>
</div>
I just added
position:relative;
top:-40px;
That -40 px means it moves 40 pixels towards the direction "top". That makes that object go up. But if you typed in there 40px instead of -40 it will go 40 pixels away from "top" making it go down :)
Hope this helps you :)
Related
I was just wondering if someone can give me a hand, i've tried for 3 hours to solve this issue. I need to have the interface like on the picture by using grids, or anything.
The closest thing i can get is when everything displayed correctly except the second bottom grid. It usually gets below the white line (thats the starting point).
Could someone give me a tip on how to get around this problem.
You have minimum two options:
one is to make the grid elements absolutely positioned and give them top, left, right and bottom values. The parent element (grid container) should have "position:relative;" (or can be fixed or absolute, but in your case relative will make more sense).
Another option is to write markup like this:
<div class="col-xs-6">
<div class="col-xs-12">
one
</div>
<div class="col-xs-12">
two
</div>
</div>
<div class="col-xs-6">
three
</div>
Basically you wrap the two divs on the left into one parent div so the layout will not break. Just make sure the height of inner divs are 50% of the height of the right box.
I have an issue with my CSS layout
I have a form that is contained in a 500 pixel fixed width. It is set to be centered in the page with margin auto;
Inside that div I made a table using div's. Since each div's that act as a table row have different height, I have used the overflow:hidden property. I did that to minimize the size of the form.
Inside that div I have 3 other divs that act like table data "td". They are floating inside the row.
What I am trying to achieve is to display another div on top of them all when there is an error in the form. Just like the one you see on Stackoverflow reminding you that you have code in your text that need to be set as code. The red div on the right. Now I am a bit stuck because I can't overflow that div to the sides.
So what other option do i have to set the height of the "row" div without using overflow:hidden. I dont want to use tables and the content is always changing.
Any solution is welcome.
Here is simple code so you get the picture;
<div class="row">
<div class="overflowing"></div>
<div class="float_left"></div><div class="float_left"></div> <div class="float_right"></div>
</div>
The overflowing div should not push the floating divs around and is not visible until I change it's property and fill it with content.
Use clearfix class with row if you are using bootstrap
<div class="row clearfix">
OR
<div class="clearfix"></div>
before end of row tag
If it is not using bootstrap
<div style="clear:both;"></div>
before end of row tag
`
<div class="float_left"></div><div class="float_left"></div> <div class="float_right"></div>
</div>`
I think it will work, and about the alternative to overflow use fixed height width thenoverflow:auto wolud be useful
The objective of the HTML below is to have on the same horizontal line the red and the blue divs, even thought the blue div is truncated on the right due to a large width. This jsfiddle shows that even though the black/container style has overflow:hidden the blue div is not truncated. What's wrong with this HTML?
<div id="row1" style="width:600px;height:100px;background-color:black;position:relative;overflow:hidden;">
<div id="c1" style="width:400px;height:30px;background-color:red;float:left">aaaa</div>
<div id="c2" style="width:400px;height:30px;background-color:blue;float:left">bbbb</div>
</div>
Floated elements will stack horizontally until the edge of their parent container is reached. At that point, the next floated element will fall down to the next line and the remaining elements will again stack next to each other.
In order to achieve the effect you're looking for, you're going to need a parent container for the floats that is wide enough to contain all the floats.
THEN, and only then, can you place another container around the parent that will clip the overflow.
<div id="row1" style="width:600px;height:100px;background-color:black;position:relative;overflow:hidden;">
<div style="width:800px">
<div id="c1" style="width:400px;height:30px;background-color:red;float:left">aaaa</div>
<div id="c2" style="width:400px;height:30px;background-color:blue;float:left">bbbb</div>
</div>
</div>
http://jsfiddle.net/THEtheChad/me4gj/7/
Floats bump down to the next line when there isn't sufficient room in the parent to contain them.
When you use float: and the parent div or object doesn't have the space to go ahead and display it all it just displays everything on the next line or into the next area.
Maybe just adding some more to your height values would fix it or subsequently toning down the size of the objects included in that area.
First of all, the inner divs are wrapping because of the width of container -- which is the basic behavior of float.
Also, "overflow:hidden" works in a different way in your code.
When contents have float: left or right and the container has overflow:hidden, then the container automatically wraps whole the contents instead of hiding contents.
For more details, please check out All About Floats
I'm trying to design a page header inside a bootstrap v3 'well' div. This header should contain a title (big text from the left), a last updated timestamp (lower left corner) and a small logon toolbar (lower right corner). This works mostly fine but now I'm trying to add a padded border around the last updated and logon toolbar divs, and it seems only the text itself stays inside the well, the padded borders are overflowing the bottom of the well.
See this bootply for an example: http://www.bootply.com/127078
Any idea's how to fix this?
If you add the overflow property to your css element .well-titlebar, that should fix it
.well-titlebar{
overflow:hidden;
}
If you place another div around your two floated divs with the clearfix class on it that should sort it out.
<div class="well well-titlebar">
<div class="PageTitleText">Page title!</div>
<div class="clearfix">
<div class="PageTitleLastUpdated">Last Updated:February 25 2014.</div>
<div class="PageTitleLogon">Logged on as: Alex Goris (Logout):
<span onclick="OpenUserInfoWindow('0008')">View Profile</span>| <span onclick="OpenUserEditWindow('0008')">Edit Profile</span>
</div>
</div>
</div>
http://www.bootply.com/127089
If you have two divs contained within a div:
<div style="border:1px;">
<div style="float:left;background-color:red;width:20px;height:20px;">
<div style="float:left;background-color:red;width:20px;height:20px;">
</div>
The two inner divs are rendered as 'invisible', as in the container div doesn't stretch to allow them to fill, as if they were not there. This creates ugly overlaps/whitespace etc.
How do you go about resolving this issue?
Insert the third div:
<div style="clear:both;"></div>
I think it may be because you are forgetting to close the tags, try this:
<div style="border:1px;">
<div style="float:left;background-color:red;width:20px;height:20px;"></div>
<div style="float:left;background-color:green;width:20px;height:20px;"></div>
</div>
Try to add the <br style="clear:both"/>, (or clear left) it is a common method to give life to floated elements within a container
<div style="border:1px;">
<div style="float:left;background-color:red;width:20px;height:20px;"> ... </div>
<div style="float:left;background-color:red;width:20px;height:20px;"> ... </div>
<br style="clear:both"/>
</div>
Parent elements are never to expand to contain floated children. While IE<8 does do this, that's a long standing bug (one of millions) in that inept browser. The best solutions are to float the parent, set the height/width, or use overflow:auto in the CSS.
The outer div isn't floated, so unless you explicitly set a height it won't display in this case (other than the border). Either set height of outer div to 20px or float it.
Is there a reason why you aren't/can't put any content in the divs? They overlap / are displayed invisible since there is no content.
<div style="border:1px;">
<div style="float:left;background-color:red;width:20px;height:20px;"></div>
<div style="float:left;background-color:blue;width:20px;height:20px;"></div>
</div>
Will show the two divs next to eachother (Tested IE6, Chrome 3, Firefox 3.5, IE7)