I have a problem where I need to line up some DIVs. I made a fiddle page and would appreciate some advice. Here's the fiddle
What I would like is for the a,b,c and d DIVs to appear within the yellow band and to the right of the DIV with test1.
I tried a lot of different combinations and I am running out of ideas. Sandeep gave me some big help. It's now almost fixed but the grey box is still low.
Can anyone suggest something.
Thank you
<div class="header_left">
<div class="header_logo">
<div class="header_text">
<div class="header_text1">Test1</div>
</div>
</div>
<div class="hdr_info">
<div id="info_left">
<div id="info_left_top">
a</div>
<div id="info_left_btm">
b</div>
</div>
<div id="info_right">
<div id="info_right_top">
c</div>
<div id="info_right_btm">
d</div>
</div>
</div>
</div>
div.header_left { background: yellow; height: 50px;}
div.header_logo { height:50px; display:inline-block; padding:0px 10px 0px 8px; background: #ABABAB; }
div.hdr_info { height:50px; display:inline-block; padding:0px 10px 0px 8px; background: #DDFF00; }
div.header_text1 { display: inline-block; }
#info_left { display:inline-block; height: 50px; }
#info_right { display:inline-block; height: 50px; }
#info_left_top { background: #772299; }
#info_left_btm { background: #2299FF; }
#info_right_top { background: #FF2299; }
#info_right_btm { background: #FF99FF; }
Just change this
div.header_logo
{
height:50px;
display:inline-block;
padding:0px 10px 0px 8px;
background: #ABABAB;
float: left;
here is the fiddle
Fiddle
give the yellow part:
position:relative;
wrap a,b,c,d in another div
target that wrapping div and add this css:
width:200px; /*change to desired width*/
position:absolute;
right:0;
I just applied vertical-align:top to the grey box DIV in your fiddle, and that seemed to fix it.
Related
I have a div inside another div and I want this second div to ignore the padding, the second div to have full width and no margin bottom. How can I make it work?
#first {
padding: 10px;
border: 1px solid #000;
}
#second {
background-color: red;
color: #fff;
}
<div id="first">
first div with 10px padding
<div id="second">
no padding
</div>
</div>
Inner element can compensate parents padding by using negative margin.
#second {
background-color:red;
color:#fff;
margin: -10px;
}
http://jsfiddle.net/n5yx8903/1/
wrap text in p or span tag
<div id="first">
<p>first div with 10px padding</p>
<div id="second">
no padding
</div>
</div>
set margin for element wrapping text, this will be the cleanest solution.
https://jsfiddle.net/n5yx8903/
Set margin-left and margin-right to -10px.
#second{
background-color:red;
color:#fff;
padding: 0;
margin-left: -10px;
margin-right: -10px;
}
Here is Fiddle.
Well CSS is not intended to do this,
you may do this with negative margin, but as you see in the fiddle, it will then overflow:
http://jsfiddle.net/n5yx8903/6/
#first{
padding:10px;
border:1px solid #000;
}
#second{
background-color:red;
color:#0ff;
margin:-10px;
}
Maybe this SO answer will help you understand this problem better:Why does CSS not support negative padding?
That is not doable in CSS. I think when that happens there are two options you can do.
Use negative margin to compensate the padding
Restructure the HTML
I would choose the latter one whenever possible and use negative margin as a fallback option.
#container {
border: 1px solid #000;
}
#first {
padding: 10px;
}
#second {
background-color: red;
color: #fff;
}
<div id="container">
<div id="first">
first div with 10px padding
</div>
<div id="second">
no padding
</div>
</div>
You can just put "first div with 10px padding" text into another div:
#first {
border: 1px solid #000;
}
#second {
background-color: red;
color: #fff;
}
#inner {
padding: 10px;
}
<div id="first">
<div id="inner">
first div with 10px padding
</div>
<div id="second">
no padding
</div>
</div>
You can just switch the divs
#first{
border:1px solid #000;
}
#second{
background-color:red;
color:#fff;
padding:0px 10px;
}
<div id="first">
<div id="second">
first div with 10px padding
</div>
no padding
</div>
I have defined a Div which is 100% wide and 380 px in height. Within this Div, I want to display an image, text, and an image right in the middle and center.
I tried using this code -
<div id="mainContent">
<div class="wrapper">
<div class="centered">
<img class="g1" src="http://www.google.com/favicon.ico" height="64" width="64"/>
<div class="text1">
some random text I want to put in the middle
</div>
<img class="g2" src="http://www.google.com/favicon.ico" height="164" width="164"/>
</div>
</div>
</div>
and the related CSS is
#mainContent {
background-color: #10AEEF;
margin: 0px auto;
border: 0px solid #000000;
width:100%;
height:380px;
text-align:center;
}
.wrapper {
text-align:center;
border:0px solid #00FF00;
}
.wrapper:before {
content:'';
height:100%;
display: inline-block;
vertical-align:middle;
}
.centered {
display: inline-block;
vertical-align:middle;
}
.g1 {
margin: 0px auto;
border: 0px solid #0000FF;
float:left;
}
.text1 {
margin: 0px auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 44px;
color: #FFFFFF;
border: 0px solid #FF0000;
width:50%;
float:left;
}
.g2 {
margin: 0px auto;
border: 0px solid #0000FF;
float:left;
}
I am trying to avoid using a table to display this. But I want the centered class to be in the middle and center and within that g1 in the middle, text1 in the middle, and g2 in the middle.
Right now all are floating to left. But when I take it out, they are are aligned one on top of the other but in the middle. I think I am missing something basic.
If I understand your question correctly and you want both images and the text centred one on top of another then this is (I think) all you need:
#mainContent{
background-color:#10AEEF;
height:380px;
text-align:center;
}
Note that you specify things like border:0px solid #000000;. Essentially what you are doing is already specifying what is default, you don't need them.
EDIT
This is the code needed to center everything both vertically and horizontally:
<div id="mainContent">
<div class="centered">
<img class="g1" src="http://www.google.com/favicon.ico" height="64" width="64"/>
<div class="text1"><p>Some text here...</p></div>
<img class="g2" src="http://www.google.com/favicon.ico" height="164" width="164"/>
</div>
</div>
And the css
#mainContent{
background-color: #10AEEF;
width:100%;
height:380px;
text-align:center;
position:absolute;
}
.centered{
position:relative;
top:50%;
transform: translateY(-50%);
}
Note: If you want to keep the wrapper div make sure you change the css from .centered to .wrapper
I'm building a staked bar graph in PHP. I need it to look like this:
Currently I am able to stack-up the gray and red values, but they are at the top of the .graph container. How do I align them at the bottom? I tried vertical-align: bottom but it did not really work.
<div class="graph">
<div class="bar">
<div class="views" style="height:'.$showViews.'px"></div>
<div class="actions" style="height:'.$showActions.'px"></div>
</div>
</div>
and CSS
.graph {
width: 200px;
height: 32px;
border-top: 1px solid #f5f5f5;
border-bottom: 1px solid #ccc;
background-color: #f5f5f5;
}
.graph .bar {
width: 10px;
float: left;
margin: 0 1px;
height:30
}
.graph .bar .views {
background-color: #ccc
}
.graph .bar .actions {
background-color: red
}
Here's my code on JSFIDDLE.
Thanks.
position:absolute will make your life easier!
Here's a fiddle:
http://jsfiddle.net/RZ8ye/1/
Basically, we're using position:absolute to stack the elements on top of one another. By giving the parent positioning (in our case, "relative"), we position the stacked elements relative to that. We set bottom, left, and right and then define the height with an inline style (percentage based, based on the parent)
just added position:relative value in CSS.
here is the modified code.
.graph .bar .views
{
background-color: #ccc;
height:10px; /*height can be added dynamically*/
position:relative;
}
.graph .bar .actions
{
background-color: red;
position:relative;
height:20px;
}
HTML looks like same as posted .
<div class="graph">
<div class="bar">
<div class="views" style="height:'.$showViews.'px"></div>
<div class="actions" style="height:'.$showActions.'px"></div>
</div>
<div class="bar">
<div class="views" style="height:'.$showViews.'px"></div>
<div class="actions" style="height:'.$showActions.'px"></div>
</div>
</div>
Here is the Demo. http://jsfiddle.net/HHnRQ/1/
This is so annoying.
In Firefox and Opera, I'm getting padding between my nested divs, but not in Chrome and Safari.
I tried border-collapse:collapse
But no luck, any ideas?
This extra space is screwing up my fluid footer (all div widths add up to 100%, but because Opera and Firefox add this space I never asked for (!) it overflows.
Here's my code:
Html:
<div id="footer">
<div class="info" id="message"> Coming Soon</div>
<div class="info" id="address">The Studio 22 Belsham Street London E9 6NG</div>
<div class="info" id="telephone">+44 (0) 778 079 6488</div>
<div class="info" id="enquiries">Enquiries</div>
<div class="info" id="mailingList">Mailing List ___________________ Submit </div>
</div>
CSS:
#footer {
z-index:3;
position:fixed;
bottom:0;
width:100%;
padding: 0;
padding-bottom: 10px;
display: table;
margin: 0;
border-collapse: collapse;
}
.info{
margin:0;
padding: 0;
display: inline-table;
border: red 1px dashed;
}
#message {
width:10%;
}
#address {
width:33%;
text-align:center;
}
#telephone {
width:20%;
text-align:center;
}
#enquiries {
width:5%;
text-align:center;
}
#mailingList {
width:29%;
text-align: right;
}
Answer:
Changed inline-table property to table-cell.
Makes sense...
Hope this helps someone out there.
I have a header bar that spans horizontally across my web page, which is comprised of one div tag and three nested div tags.
HTML:
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="rightTop">
RIGHT
</div>
<div id="centerTop">
CENTER
</div>
</div>
CSS:
#top-bar
{
margin: 0;
padding: 1px 4px;
font-size: x-small;
background-color: #005555;
font-family: Arial;
}
#top-bar .separator
{
padding: 0 7px;
border-right: 0px solid #fff;
border-left: 0px solid #fff;
}
#leftTop
{
display: inline;
float: left;
}
#rightTop
{
display: inline;
float: right;
}
#centerTop
{
color: #ffffff;
text-align: center;
}
And it works just great, except for the fact that the div tags are out of order in the HTML code, which I don't like. If I order the div tags by placing them Left, Center, and Right, in the HTML, then the Right div just disappears from the webpage! I'm guessing that it has something to do with the float and text-align attributes having a conflict.
Anyone have any ideas on what is going on here, or is there an easier way to do this in CSS?
Try float: left; on #centerTop or display: inline on all three without any floats.
This works fine, but it depends on what you need. If you dont know the height of the content and you want it to expand dynamicly, then this is not enough:
#leftTop
{
float: left;
}
#rightTop
{
float: right;
}
#centerTop
{
float:left;
text-align: center;
}
I just tested the code from the original post in Firefox 3.0.10, Opera 9.64, IE8 and Google Chrome 2.0.181.1
All browsers showed all 3 divs, not a single div fell off the screen... Are you perhaps using IE6?
I am running your HTML and CSS of FF 3.0.10.
When you re-arrange the CENTERTOP div to be between the LEFTOP and RIGHTTOP divs, the RIGHTTOP div doesn't fall 'off the page' but the "RIGHT" text just falls off onto the next line.
My solution is proposed below (you'll notice I have some additions and some best-practice techniques).
HTML CODE:
<html>
<head>
<link rel="stylesheet" href="global.css">
</head>
<body>
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="centerTop">
CENTER
</div>
<div id="rightTop">
RIGHT
</div>
</div>
<div class="clearer">
</div>
<div id="randomContent">
RANDOM CONTENT
</div>
</body>
CSS CODE:
#top-bar {
margin: 0;
font-family: Arial;
}
#leftTop {
float: left;
width: 20%;
border: 1px solid red;
}
#centerTop {
float: left;
width: 20%;
border: 1px solid blue;
}
#rightTop {
border: 1px solid green;
}
.clearer {
clear: both;
}
#randomContent {
background-color: yellow;
}
So you'll notice in the HTML that the divs are arranged in order from LEFT to CENTRE to RIGHT. In this CSS, this has been reflected by floating the LEFTTOP and CENTRETOP divs left. You will also notice that I have specified a width property on the LEFTTOP and the CENTERTOP divs, to enable you to space out your divs as wide as you want. (You'll be able to visually see your width modifications as I've added in a border on the divs). No width percentage property has been applied on the RIGHTTOP div as it will consume the remaining 60% of the width (after the LEFTTOP and CENTRETOP have consumed the 40%).
I have also added a CLEARER div. Think of the CLEARER div is a horizontal line break. Essentially it acts as a line of demarcations to separate the floated divs from the content below.
You can then add whatever content you want in the RANDOMCONTENT div.
Hope this helps :)
I don't know that it disappears, but it would drop down a line. Lot's of websites put it out of order for that reason (I know I do).
Another alternative:
#top-bar
{
margin: 0;
padding: 1px 4px;
font-size: x-small;
background-color: #005555;
font-family: Arial;
}
#top-bar .separator
{
padding: 0 7px;
border-right: 0px solid #fff;
border-left: 0px solid #fff;
}
#top-bar>div
{
float: left;
width: 33%;
}
#rightTop
{
text-align: right;
}
#centerTop
{
color: #ffffff;
text-align: center;
width: 34%;
}
And then put <br style="clear:both"/> right before you close your top-bar div.
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="centerTop">
CENTER
</div>
<div id="rightTop">
RIGHT
</div>
<br style="clear:both"/>
</div>
Not sure if you want the width's defined like this, however.
Another solution:
Set the leftTop, centerTop, and rightTop to display:table-cell,
Set the top-bar to display:table-row,
Set a container to display:table
Set the width of the container and row (#table-bar) to 100%;
Set the width of the columns to the desired ratios (e.g., 25% for left and right, 50% for center)
caveat: table, table-row, and table-cell css display values do not work in IE 5.5 or 6 (and maybe Opera 8); but they do work nicely in all contemporary browsers. IE conditionals can be used to split code for IE > 5 and IE < 7.
TEST:
<html>
<head>
<title>3 Column Header Test</title>
<style type="text/css">
body#abod {
background-color:#F5ECBD;
color:#000;
}
#hdrrow {
margin:0;
padding:0;
width:100%;
border:1px solid #0C5E8D;
display:table;
}
#top-bar {
margin:0;
padding:1px 4px;
width:100%;
font-size:100%;
background-color:orange;/*#005555;*/
font-family: Arial;
border:1px solid #000;
display:table-row;
}
#leftTop {
margin:0;
padding:0 16px;
width:24%;
text-align:left;
color:#000;
background-color:#F0DD80;
border:1px dashed #f00;
display:table-cell;
}
#centerTop {
margin:0;
padding:0 16px;
width:40%;
margin:0 auto;
text-align:center;
color:#000;
background-color:#F5ECBD;
border:1px dashed #f00;
display:table-cell;
}
#rightTop {
margin:0;
padding:0 16px;
width:24%;
text-align:right;
color:#000;
background-color:/*#F0DD80;*/transparent;
/*shows the orange row color*/
border:1px dashed #f00;
display:table-cell;
}
#footer {
padding:25px;
color:#000;
background-color:#F5ECBD;
}
</style>
</head>
<body id="abod">
<div id="hdrrow">
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="centerTop">
CENTER
</div>
<div id="rightTop">
RIGHT
</div>
</div>
</div>
<h4 id="footer">Footer Lorem ipsum dolor sit amet</h4>
</body>
</html>
Use relative positioning to swap the positions of the divs after they have been floated:
The HTML
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="centerTop">
CENTER
</div>
<div id="rightTop">
RIGHT
</div>
</div>
The CSS
#leftTop {
width:33%;
float:left;
}
#centerTop {
width:33%;
float:right;
position:relative;
right:33%;
}
#rightTop {
width:33%;
float:right;
position:relative;
left:33%;
}
I use the same process in my Perfect Liquid Layouts to change the column source ordering.