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
Related
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
I have a strange issue with floating elements. The float-left property of the heart is getting floated as if the start of the div is from bellow the add to bag button, instead of the start of the div on the very left, under the yellow box with 1 in it.
All three elements have float-left property, and their parent div has clearfix class from Bootstrap. I don't think any other CSS is acting upon their positioning.
.html
<div class="clearfix">
<div class="pull-left">1 dropdown box</div>
<div class="pull-left">add to bag button</div>
<div class="pull-left">heart</div>
</div>
They are usually aligned next to each other, but on smaller screens the add to bag button pushes the heart button on the bottom line and the idea is when it gets pushed to be under the dropdown with the quantity.
Any ideas?
Don't use float (use display:inline-block instead) and it solves. If you want to use floats, you need to reestructure html. You can make a simple grid with classes to small and big screens, that allows you to control better the behaviour.
you can use Breakpoint for the the small screen size that then use
poistion:relative;
in the css
#media screen max-width:480px;{
position:relative;
}
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 :)
I am using pull-right on a div that sits inside a container div but for some when I use a pull right on the div it makes the div wider so that it isn't flush with the right side of the page. Ive used Chrome to inspect the element but I can't figure out where this extra width is coming from. It isn't the padding or the margin the container just seems to be wider?
Problem can be seen here at the top of the page where all the social media icons are.
http://puntachivosurfcamp.com/
<div class="container">
<div class="pull-right">
<a><img/></a>
...
</div>
</div>
There is no such extra space but the text is just aligned to the left although the container you are talking about is pull-right but the objects in it aren't. So:
Apply text-right as well on your pull-right div to align the text to right side :)
Apply pull-right to every object present in the div aka social media icons (but I recommend the first approach)
Explanation:
The width of the container is greater then the width of all the object in it so when the objects in the container will be left aligned it will show us as if some extra space was present on the right side but as soon as we align the text to the right we see that now the space has been vanished and the objects have now come on the extreme right of your page.
I'm working with OpenLayers mapping. OpenLayers draws maps on a webpage, and has a mechanism for placing UI controls on those maps. One of its controls is the Panel control, which contains some number of button controls.
A Panel control is rendered as a div, with a bunch of child divs within it - one for for each button. The appearance of the Panel control, and of all of the button controls, is configured with CSS. My problem is with how to write the CSS to get what I want. (Note, I can't change the rendered html without hacking at the OpenLayers sourcecode, which I'd rather avoid.)
So I've put together a sample of the kind of html I need to work with, here
I want the buttons to be laid out horizontally, from left to right, at the top right of the map. I can do that with float:right, and position:absolute.
I want the buttons to be laid out on multiple lines. If I add a width: to the panel, the child button divs will wrap. But I don't want over-flow wrapping, I want to wrap between specific buttons. And I can't figure out how to do that in css.
If you take my example, for example, I can cause it to put the first five buttons on the first line, and the last two on the second, by change the width. But suppose I wanted to put the first three buttons on the first line, and the last four on the second. If I set the width so that the buttons wrapped after the third, I'd get the seventh button on a third line, which I don't want.
Using set-width and automatic wrapping to position the child buttons always puts the same number of child buttons on every line, with the last line possibly short. That's not what I need.
Thinking about it, I could use position:absolute on every button, but that starts to seem very tedious. Anyone have a simpler approach?
If you can alter the CSS of a specific element, you could just set clear: right:
<div id='contents'>
<div id='panel'>
<div id='button1'>1</div>
<div id='button2'>2</div>
<div id='button3'>3</div>
<div id='button4' style='clear: right'>4</div>
<div id='button5'>5</div>
<div id='button6'>6</div>
<div id='button7'>7</div>
</div>
</div>
You could alternatively insert a clearing element between the buttons:
<div id='contents'>
<div id='panel'>
<div id='button1'>1</div>
<div id='button2'>2</div>
<div id='button3'>3</div>
<br style='clear: right' />
<div id='button4'>4</div>
<div id='button5'>5</div>
<div id='button6'>6</div>
<div id='button7'>7</div>
</div>
</div>