I've got three divs next to eachother and without content in them they align perfect.
However once I place another div inside the first one, the other 2 (middle and right) are pushed down. The inner div is smaller than his parent (the left one), so I don't see why it's pushing down.
This is the global wrapper:
.main-content {
width: 1100px;
min-height: 500px;
margin: auto;
margin-top: 100px;
}
The left div:
.left-menu {
width: 250px;
height: 100%;
margin-left: 20px;
margin-top: 30px;
background-color: rgba(255, 255, 255, 0.95);
display: inline-block;
}
The middle:
.main {
width: 500px;
min-height: 500px;
background-color: rgba(255, 255, 255, 0.95);
display: inline-block;
margin-left: 20px;
}
And the right div:
.right-pane{
width: 250px;
margin-left: 15px;
margin-top: 30px;
background-color: rgba(255, 255, 255, 0.95);
display: inline-block;
}
At the moment they are classes rather than id's, but that shouldn't make a difference I guess?
Now once we place a div like the following inside left-menu the other 2 are pushed down:
<div class="leftmenu-item">
<p class="redtext">This is a quite a long sentence hehehe</p>
<p class="datetext">Date: 25-07-2013</p>
<p class="timetext">Time: 13:00</p>
</div>
css:
.leftmenu-item {
height: 100px;
width: 200px;
}
The other classes of the paragraphs only set a font type and a color.
So the whole structure looks like this:
<div class="main-content">
<div class="left-menu">
<div class="leftmenu-item">
<p class="redtext">This is a quite a long sentence hehehe</p>
<p class="datetext">Date: 25-07-2013</p>
<p class="timetext">Time: 13:00</p>
</div>
</div>
<div class="main">
Testy
</div>
<div class="right-pane">
Hello.
</div>
</div>
I've tried using float, but that is not working well either. If anyone knows a solution, i'd be happy
add vertical-align:top; to those div.
By default they are aligned from their baseline.
It may be a typo:
You have missed class selector for main
Related
Fiddle: http://jsfiddle.net/rg3w8kxc/2/
I have a fixed bar on top and an element below it. Since the top bar is fixed, I need to add some padding to the top of the element below it so that the whole height of that element shows. However, when I add something like padding-top:40px for example, it doesn't move the element down; rather it creates space below the element. Same goes with margin.
I feel like I'm missing something obvious. What's the issue here?
Here's my HTML:
<div id="top-bar">
<div class="section-wrap">
Win a [name of phone]!
</div><!-- .section-wrap -->
</div>
<div id="top-section-page">
<div class="section-wrap">
<span>⇦</span> Back to the mix
</div>
</div>
<p>Some text here</p>
Here's my CSS:
#top-bar {
background: #FAFAFA;
height: 60px;
line-height: 60px;
padding: 0 20px;
position: fixed;
width: 100%;
z-index: 999;
}
#top-section-page {
background: url("http://i.imgur.com/KNYV8j2.jpg") repeat center top #69C9CA;
border-bottom: 10px solid #FFF;
line-height: 185px;
margin-bottom: 100px;
}
You can add add the padding-top on the body and then you need a top 0px on the #top-bar
Add this to your css code:
body{
padding-top: 40px;
}
#top-bar {
top: 0px;
}
I'm trying to create a list of items where each item in the list contains essentially two columns ... the left column some text, and the right column 2 buttons for yes/no. I want the two buttons on the right to be vertically aligned with the text. For aesthetic reasons, I want a min-height on the list item. I finally figured out that a floating div must be inside an absolute div for the 100% height to work. The problem is now that I have an absolute div inside my original relative div, it no longer expands to accommodate text longer than min-height. I've read so many articles and tried so many different combinations of height/relative/absolute/float/clear/overflow and nothing has worked for my situation. Is there a solution to this?
In my example here http://jsfiddle.net/THBFY/4/ I need the red box to be the same height as the blue box so that the vertical align works.
<div class="list_container">
<div class="list_item">
<div class="item_text">
My text in this item. This could be a variable length creating a div ranging from about 75-150px in height. This is a lot of text to make it longer although I am not really saying anything here. It is only to make the blue box taller than the red box.
</div>
<div class="item_buttons">
<div class="buttons_inner">
<div class="button button_yes">Y</div>
<div class="button button_no">N</div>
</div>
</div>
</div>
</div>
.list_container { position: relative; width: 400px; }
.list_item { position: relative; min-height: 70px; overflow: hidden; border: #000000 solid 1px; }
.item_text { float: left; width: 340px; background-color: #0066BB }
.item_buttons { display: table; float: right; width: 50px; height: 100%; background: #FF0000; }
.buttons_inner { display: table-cell; vertical-align: middle; }
.button { display: block; margin-left: auto; margin-right: auto; height: 40px; width: 40px; background-repeat: no-repeat; }
.button_yes { background-image: url("images/yes.gif") }
.button_no { background-image: url("images/no.gif") }
When I add in the inner div with position:absolute http://jsfiddle.net/THBFY/5/ the problem is the height no longer increases to show all of the text.
<div class="list_item_inner">...
.list_item_inner { position: absolute; height: 100%; }
But if I now change the min-height of the outer div from 70 to 200 http://jsfiddle.net/THBFY/6/, you can see that the 100% height on the red box is in fact working, so my problem is either in the first situation without the absolute position, I need the red box to stretch, or in the 2nd situation with the absolute div, I need the container to stretch.
HTML:
<div class="list_container">
<div class="list_item">
<div class="item_text">My text in this item. This could be a variable length creating a div ranging from about 75-150px in height. This is a lot of text to make it longer although I am not really saying anything here. It is only to make the blue box taller than the red box.
</div>
<div class="item_buttons">
<div class="buttons_inner">
<div class="button button_yes">Y</div>
<div class="button button_no">N</div>
</div>
</div>
</div>
</div>
CSS:
.list_container { position: relative; width: 400px; }
.list_item { border: #000000 solid 1px; display:table; }
.item_text { display:table-cell; width: 340px; background-color: #0066BB }
.item_buttons { display:table-cell; width: 50px; background: #FF0000; }
.button { display: block; margin-left: auto; margin-right: auto; height: 40px; width: 40px; background-repeat: no-repeat; }
.button_yes { background-image: url("images/yes.gif"); }
.button_no { background-image: url("images/no.gif"); }
fiddle
Here is an image that illustrates my goal:
http://imgur.com/80v5bRk
What would be the best way to achieve a style that looks like this? By this, I am asking, how can I set up rules so that the spacing and locations of the buttons are perfectly aligned in the center (they are not aligned correctly right now). I was thinking of a div that wraps the whole thing together, a div that floats left holding the first angle and the title, and a second div that floats left holding the icons. The icons are from the font-awesome package and I do not understand how to align them correctly.
Something along the lines of this should do:
HTML:
<div class="bar">
<div class="first button"></div>
<dic class="second button"></div>
</div>
CSS:
.bar{
width: 960px;
height: 60px;
margin: 0 auto 0 auto;
padding: 5px;
}
.button {
width: 50px;
height: 100%;
float: right;
margin-right: 10px;
background-size: 50px 50px;
background-repeat: no-repeat;
background-position: center; /* This is what will centralize it vertically and horizontally */
}
.first { background-image: url('image.png') }
.second { background-image: url('image2.png') }
I hope this helped.
Well, its hard to answer it exactly unless you post what you currently have.
However, your on the right track.
What I would do:
Wrap the whole thing in a div (as you said)
float the text left (which you said as well)
float the icons right (not left)
As far as spacing, put a margin/padding left/right to the two buttons.
EDIT:
As per my discussion with Luiz Berti:
You are almost right.
Try this instead:
http://jsfiddle.net/GYPK5/1/
HTML
<div class="bar">
<div class="text">Lots of stuff here</div>
<div class="buttons">
<img src="http://icons.iconarchive.com/icons/led24.de/led/16/page-white-edit-icon.png" />
<img src="http://icons.iconarchive.com/icons/led24.de/led/16/bin-closed-icon.png" />
</div>
<div class="clear"> </div>
</div>
CSS
.bar {
width: 400px;
border: 1px solid black;
height: 20px;
font-size: 16px;
line-height: 20px;
}
.text {
margin-left: 20px;
float: left;
width: 200px;
}
.buttons {
float: right;
margin-right: 20px;
position: relative;
top: 2px;
}
.buttons img {
margin: 0 10px;
}
.clear {
clear: both;
width: 0;
height: 0;
}
I have this basic HTML structure:
<div id="left-column"></div>
<div id="content"></div>
<div id="right-column"></div>
And this css:
#left-column
{
padding-top: 25px;
width: 80px;
background: url('../../common/images/black70.png');
height: 100%;
float: left;
margin-right: 5px;
}
#content
{
padding: 5px;
}
#right-column
{
padding-top: 25px;
width: 190px;
background: url('../../common/images/black40.png');
height: 100%;
float: right;
}
The problem is content padding is being propagated to right column:
How can I avoid this?
Thanks
The problem is your #right-column is after #content so in the document flow, it will start after the content, which has 10px height from its top and bottom padding.
If you re-order your HTML like so, it fixes your issue.
<div id="left-column"></div>
<div id="right-column"></div>
<div id="content"></div>
Here's a jsfiddle
If you've got floating things and non-floating things, the floating things should always come before the non-floating ones in the source.
In your case, the content is rendered first, and then the right-column below that.
I'm trying to put two blocks into one fixed-height block to create the following layout:
------------------------
UL (initial height=0),
grows on element add until maximum height reached
scroll should be added after max height is reached
------------------------
DIV (initial height=100% of parent)
decreases until min height is reached
------------------------
HTML part of the layout:
<div style="height:100px">
<ul style="max-height:70px;height:auto;overflow:auto"></ul>
<div style="min-height:30px;height:auto">
<span>TEST CONTENT</span>
</div>
</div>
You really can't do this cleanly with just CSS. I'd suggest using a bit of jQuery for this where you just query the height of both at any given time, figure out which is taller, and then set the other element to match
I'm not sure that the DIV's properties are entirely clear. Note, this is not an answer (yet), just too long to put into a comment.
<div id="container">
<div id="list">
<ul></ul>
</div>
<div id="content">
<span>TEST CONTENT</span>
</div>
</div>
#container {
height: 100px;
background: grey;
}
#list {
max-height: 70px;
overflow: auto;
background: #ddf;
}
#content {
min-height: 30px;
height: auto;
background: #fdf;
}
// For testing
setInterval(function(){
$('ul').append('<li>Test</li>');
},3000);
http://jsfiddle.net/V8yuN/
Now, if you want the DIV#content to at first take up the entire height, but then shrink as the DIV#list UL grows, what is it you're trying to accomplish with DIV#content? Note, I put the UL within a DIV.
Now, the above fiddle demonstrates in a way what you're describing (the DIV#content gets pushed to the bottom). The question I have is, what does the height of the DIV#content matter in your design?
EDIT
Note, if you make the #container overflow: hidden and make the #content's height: 100%, it would appear as if the #container is shrinking.
#container {
height: 100px;
background: grey;
overflow: hidden;
}
#list {
max-height: 70px;
overflow: auto;
background: #ddf;
}
#content {
height: 100%;
background: #fdf;
}
http://jsfiddle.net/V8yuN/2
I have no idea, though, if that would cause your design to break, if the #content's actual content needs to display (for instance, if it is changed dynamically).
EDIT 2
The following accomplishes everything but the vertical-align of the #content text:
HTML
<div id="container">
<div id="push">
<div id="list">
<ul></ul>
</div>
<div id="content">
<div class="border-top"></div>
<div id="content-inner">
<span>TEST CONTENT</span>
</div>
</div>
</div>
<div class="border-bottom"></div>
</div>
CSS
#container {
height: 100px;
background: grey;
}
#push {
height: 95px;
overflow: hidden;
}
#list {
max-height: 70px;
overflow: auto;
background: #ddf;
}
#content-inner {
min-height: 100px;
background: #dfd;
margin: 0;
border-left: 5px solid #fdf;
border-right: 5px solid #fdf;
}
.border-top {
background: #fdf;
border-radius: 5px 5px 0 0;
height: 5px;
}
.border-bottom {
background: #fdf;
border-radius: 0 0 5px 5px;
height: 5px;
}
http://jsfiddle.net/V8yuN/6/
Let's say your html looks like this:
<div id="wrap">
<div id="top">
</div>
<div id="bottom">
</div>
</div>
then your CSS could look like this, with #wrap height set, and a min-height for the bottom.
Mind the height 100% !important.
#wrap{
height: 400px;
background: #ccc;
}
#top{
//height: 200px; for testing
background: #f0f;
}
#bottom{
height: 100% !important;
min-height: 200px;
overflow: scroll;
background: #000;
}
is that kind of what you're searching for?
Would help though if you could post the stuff you've already done.