when I'm resizing my browser-window the blue buttons go below the logo on the left, on the same line as the text "Welkom Bart" although they are two different layers. I want the text "Welkom Bart" to lower as well, so they are not on the same line. What do I need to add to my css?
html e.g.
<div id="mainmenu">
<div id="logo"><img ... /></div>
<div id="usermenu">Buttons</div>
</div>
<div id="maintitle">
<h2>Welkom Bart</h2>
<hr />
</div>
css
#mainmenu {
height: 100px;
position: relative;
}
#logo {
float: left;
width: 200px;
margin-right: 20px;
}
#usermenu {
float: right;
}
#maintitle {
margin-bottom: 20px;
}
#maintitle hr {
color: #56c2e1;
display: block;
height: 1px;
border: 0;
border-top: 1px solid #56c2e1;
margin: 10px 0;
}
Add clear:both to #maintitle =)
Add overflow:hidden to #mainmenu. This will cause its height to include all floated elements, such as your #usermenu element, allowing flow to continue underneath it.
Use this
<div id="maintitle" style="width:100%">
<h2>Welkom Bart</h2>
<hr />
Related
I have this code here:
<div style="border:3px solid #808080;">
<h1 style="text-transform: uppercase;font-size: 38px;color: #808080;text-align: center;">Lowell</h1>
<div class="column-1">
<img src="images/ruler-icon.png">
</div>
<div class="column-2">
<img src="images/bed-icon.png">
</div>
<div class="column-3">
<img src="images/bath-icon.png">
</div>
</div>
my problem is that the border does not go over the column-1, column-2, column-3...those elements are floating left, how do I get them to be included in the border?
Here is the CSS
.column-1, .column-2, .column-3
{
float:left;
width: 33%;
border-right: 3px solid #808080;
height: 52px;
padding: 10px;
}
Either add a div in parent with clear:both property right after the floated divs as mentioned by RemyaJ. like this
https://jsfiddle.net/zmasvt8b/
Or
Simply give overflow:hidden property to the parent div. Like this
https://jsfiddle.net/jv5xtLg9/
I realize you've already chosen an answer, but here is an alternative - using flexbox. I also separated all the CSS from the HTML (like it should be!)
.container {
/* Important for columns */
display: -webkit-flex;
display: flex;
}
.item {
/* Important for columns */
flex-grow: 1;
border: 3px solid #808080;
border-top: none;
height: 52px;
padding: 10px;
}
.heading {
border: 3px solid #808080;
margin: 0;
text-transform: uppercase;
font-size: 38px;
color: #808080;
text-align: center;
}
/* Remove duplicate borders */
.item-2 {
border-left: none;
border-right: none;
}
<h1 class="heading">Lowell</h1>
<div class="container">
<div class="item item-1">
<img src="images/ruler-icon.png">
</div>
<div class="item item-2">
<img src="images/bed-icon.png">
</div>
<div class="item item-3">
<img src="images/bath-icon.png">
</div>
</div>
Add a div with style clear:both after the floated divs inside parent div. This will hopefully fix this issue.
I think this is the css you need. Choose the width according to your needs.
.column-1, .column-2, .column-3
{
width: 30%;
border-right: 3px solid #808080;
height: 52px;
padding: 10px;
display:inline-block;
}
The reason for this is that parent elements are never to contain floated elements. To make this happen, just add overflow:auto; to your main div. That will force the div to contain floated elements that "overflow" the container.
There are other, probably better ways to accomplish the same thing but this is the easiest.
Never, ever add HTML elements to do what CSS can and should do.
I have the classic two divs side-by-side problem, which usually I have no problem with (float: left both divs and add a clear:both div after them).
My requirements are making this more complicated to solve...
I would like the left-hand div to occupy, as a column, the left hand side of the containing div (the left hand div will hold a number, ie '1.')
I would like the right-hand div to occupy the remaining space to the right of the left div - and most importantly I would like it NOT to drop below the left-hand div when there is insufficient 'space' for it to fit. Instead, I would like the right-hand div to remain in position and for the text within to WRAP, staying to the right of the left-hand div. Surely this is simple!
I do NOT want to set arbitrary width values because the length of the number in the left-hand div will vary, affecting the distance between the number and the right-hand text.
Here is some example html:
<div class="popup-container"> // set to width: 300px; in css
<div class="popup-text">
<div class="float-left">
<h3>2.<.h3>
</div>
<div class="float-left">
<h3>Example text here, long enough to wrap around<.h3>
</div>
<div class="clear"></div>
</div>
</div>
And the css:
.popup-container {
width: 300px;
}
.popup-text h3 {
line-height: 1.25;
padding: 0px 8px 0px 0px;
}
.float-left {
float: left;
}
.clear {
clear: both;
}
OK, I think that's about it. If anyone knows how to have the left div operate as a column, against which the text in the right-hand div remains justified left (instead of dropping 'below' the left hand div), that would be swell.
EDIT
Thanks for all the answers. I should have mentioned (!!) it has to work in IE8. I know. But it really does. Big organisation, not updating its machines, unfortunately.
Flexbox and CSS Tables can both do that.
Support
Flexbox is IE10+
CSS Tables are IE8+
FLEXBOX
.popup-container {
width: 300px;
border:1px solid grey;
}
.popup-text {
display: flex;
}
.popup-text h3 {
line-height: 1.25;
padding: 0px 8px 0px 0px;
}
.left {
flex: 0 0 auto;
background: #c0ffee;
}
.right {
flex:1;
background: yellow;
}
<div class="popup-container">
<div class="popup-text">
<div class="left">
<h3>2.</h3>
</div>
<div class="right">
<h3>Example text here, long enough to wrap around</h3>
</div>
</div>
</div>
CSS Tables
.popup-container {
width: 300px;
border:1px solid grey;
}
.popup-text {
display: table
}
.popup-text h3 {
line-height: 1.25;
padding: 0px 8px 0px 0px;
}
.left {
background: #c0ffee;
display: table-cell;
}
.right {
background: yellow;
display: table-cell;
}
<div class="popup-container">
<div class="popup-text">
<div class="left">
<h3>2.</h3>
</div>
<div class="right">
<h3>Example text here, long enough to wrap around</h3>
</div>
</div>
</div>
Use display:flex;
.popup-container {
width: 300px;
}
.popup-container .popup-text {
display: flex;
}
.popup-text h3 {
line-height: 1.25;
padding: 0px 8px 0px 0px;
}
.float-left {
float: left;
}
.clear {
clear: both;
}
<div class="popup-container">
<!-- set to width: 300px; in css -->
<div class="popup-text">
<div class="float-left">
<h3>2.</h3>
</div>
<div class="float-left">
<h3>Example text here, long enough to scroll</h3>
</div>
<div class="clear"></div>
</div>
</div>
Here is a solution using display: flex
.popup-container {
width: 300px;
background-color: coral;
}
.popup-text {
display: flex;
}
.popup-text div.two {
flex: 1;
background-color: cornflowerblue;
}
.popup-text h3 {
line-height: 1.25;
padding: 0px 8px 0px 0px;
}
<div class="popup-container">
<!-- set to width: 300px; in css -->
<div class="popup-text">
<div class="one">
<h3>2.</h3>
</div>
<div class="two">
<h3>Example text here, long enough to scroll</h3>
</div>
</div>
</div>
i have a legend for a graph that sometimes is scrollable and sometimes isn't.
Unfortunately when the scrollbar shows up, it pushes all of the elements over to the left a bit. So they don't line up with a total (outside the scrollable area)
Example: http://jsfiddle.net/3sKVR/
A simple answer would be to just set a fixed width, but unfortunately, it has to be responsive.
Also, i can't use custom scrollbars to maintain consistency with the rest of the site and also bring down page-load times.
Any help would be greatly appreciated (with internet points!)
Cut down version of code:
HTML:
<div id="legend_cont">
<div id="legend_list">
<div id="legend">
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#ffb100"></div>
</div>
<div class="legend_cell">Merch G</div>
<div class="legend_cell legend_value">$1423.24</div>
</div>
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#ed5929"></div>
</div>
<div class="legend_cell">Merch L</div>
<div class="legend_cell legend_value">$1351.07</div>
</div>
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#3f9c35"></div>
</div>
<div class="legend_cell">Merch N</div>
<div class="legend_cell legend_value">$1194.90</div>
</div>
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#009bbb"></div>
</div>
<div class="legend_cell">Merch T</div>
<div class="legend_cell legend_value">$1188.14</div>
</div>
</div>
</div>
<div id="legend_total">Total:<span id="legend_total_value">$0.00</span>
</div>
</div>
CSS:
#legend_cont {
height: 100%;
border-left: 2px solid #ADADAD;
width: 40%;
float: right;
}
#legend_list {
height: 169px;
overflow: auto;
margin: 20px 4% 20px 7%;
}
#legend {
display: table;
width: 90%;
}
.legend_row {
display: table-row;
}
.legend_cell {
display: table-cell;
padding: 5px;
vertical-align: middle;
}
.legend_colour {
width: 10px;
height: 20px;
background-color: #c1c1c1;
border-radius: 3px;
}
.legend_value {
text-align: right;
}
#legend_total {
height: 50px;
line-height: 50px;
width: 88%;
border-top: 1px solid;
margin-left: 8%;
}
#legend_total_value {
float: right;
padding-right: 5px;
}
1) Make sure there is always a scroll bar
CSS
#legend_cont {
overflow-y: scroll;
}
2) Use js to grab the variable width of the scrollbar (example here)
3) Set the padding-right in #legend_total_value equal to that variable in jquery.
JS
$('#legend_total_value').css('padding-right', wScroll);
Try applying padding-right to compensate for the size of scrollbar when it's not there and position the total accordingly.
#legend_list {
height: 169px;
overflow: auto;
margin: 20px 4% 20px 7%;
padding-right:15px;
}
Demo
I have a header/ container with no specified width (therefore it's as long as the parent). Inside that, I have two smaller divs. Now, the first one should only contain a picture (with a set size), and the other should be as big as there's space left. I can't use a set width, because I don't know the width of the header.
How do I do this with pure CSS?
What I want ultimately is a picture, then some text aligned to the right top, and then some text aligned with the bottom of the picture on the left.
Do you know of any better way to do this?
Here's a picture so it's easier to understand:
Thanks, Aleksander
EDIT 1:
HTML:
<div class="header">
<div class="header_left">
<div class="pic"><img width="35px" src="http://upload.wikimedia.org/wikipedia/commons/1/1a/Volkswagen_Logo.png" /></div>
</div>
<div class="header_right">
<div class="time">18m ago</div>
<div class="name">Volkswagen</div>
</div>
</div>
CSS:
.header {
}
.header_left {
display: inline-block;
}
.pic {
margin: 5px;
}
.header_right {
display: inline-block;
}
.time {
margin: 5px;
float: right;
}
.name {
margin: 5px;
float:left;
}
It's kinda' messy right now, because what I've just been trying a lot of stuff, and this is the last thing.
It would be easier if you displayed your html. Here's an example based on your description. You can see this working in the fiddle here
http://jsfiddle.net/Z68ds/18/
.header {
overflow:hidden;
padding: 4px;
background: #ddd;
}
.caption {
float: right;
font-size: 0.9em;
}
.avatar {
float: left;
}
.title {
margin: 14px 0 0 38px;
}
<div class="header">
<div class="caption">
texty text2
</div>
<img class="avatar" src="http://i.stack.imgur.com/5dv0i.jpg?s=32&g=1" />
<div class="title">texty text1</div>
</div>
You have to use overflow in the element you don't want to set a width without floating it.
#left {
float: left;
width: 100px;
}
#right {
overflow: hidden;
}
This will force the #right element to cover the rest of its parent. No extra markup needed.
Is this what you want to achive?
<div id="header">
<img id="logo" src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png" />
<p id="textRight">texty text2</p>
<p id="textLeft">texty text1</p>
<div class="clearer"></div>
</div>
/* CSS */
#logo {
float: left;
}
#textRight {
float: right;
}
#textLeft {
clear: right;
float: left;
}
.clearer {
clear: both;
}
Here is a fiddle:
http://jsfiddle.net/T26cD/
I've searched the many similar questions like this, but none of the solutions are working. It should also be noted that I am using twitter bootstrap. I want a bunch of divs to span the entire length of the parent div at the bottom of it. I have tried putting them inside a div that text-align:center and then using float-left inside the gridPics class, and using display: inline-block, text-align :left and nothing seems to do it. The two in the example below are in the exact same spot, and I want them side by side. Here is what I have:
HTML:
<div class="row-fluid">
<div class="span8 offset2 articleContent">
<!-- These are the divs to span across, when it works there would be more than two -->
<div class="gridPics"></div>
<div class="gridPics"></div>
<!-- They will also go over this image -->
<img id="sidePic" src="img/about/aboutHeader_Mid1.png" alt="about">
</div>
<div class="span2"></div>
</div>
CSS:
.gridPics{
position: absolute;
z-index: 1;
width: 10%;
height: 20%;
background: #0000b3;
bottom: 0;
float: left;
}
.articleContent{
position: relative;
box-shadow: 0 0 5px 5px #888;
}
#sidePic{
position: relative;
z-index: -1;
}
Here is where I am doing this, the blue divs would be pics (akin to thumbnails) that can be clicked. I want them to go all the way across:
/ScreenShot2013-01-09at85450PM_zps550e8e4a.png[/IMG]
Here's a fiddle:
http://jsfiddle.net/pureux/Er9eG/
You need a container for your gridPics and have it be absolute positioned (instead of the gridPics) at the bottom. Then float the gridPics inside of the container.
.picContainer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
min-height: 50px;
}
.gridPics {
width: 50px;
height: 50px;
float: left;
display: block;
margin-right: 4px;
margin-top: 4px;
}
Is this what you're trying to do:DEMO
HTML
<div class="row-fluid">
<div class="span8 offset2 articleContent">
<div class="gridPics"></div>
<div class="gridPics"></div>
<div class="clear"></div>
<img id="sidePic" src="img/about/aboutHeader_Mid1.png" alt="about">
</div>
<div class="span2"></div>
</div>
CSS
.gridPics{
width: 10%;
height: 20px;
background: #0000b3;
float: left;
border:solid #FFF 1px;
}
.articleContent{
box-shadow: 0 0 5px 5px #888;
}
#sidePic{
z-index: -1;
}