How do I do this in widths? The gray middle div is 100% - 50px - 50px. Please show code; below this image is my guess
EXAMPLE : (http://mediahood.net/mesgr.png)
<div style="position:absolute;left:0px;width:50px;height:50px;">
<div style="width:50;height:50px;background-color:#000;margin:0px;">
<img id='txtrattach' src="/assets/txtr-attach.png" height='50px'></div>
</div>
<div style="position:absolute;left:50px;width:258px;height:50px;font-family:'Harabara';font-size:12px;">
<input id="txtrinput" type="text" name='message' onKeyPress='return charLimit(this)' onKeyUp='return characterCount(this)'>
</div>
<div style="position:absolute;right:0px;width:50px;height:50px;">
<div style="width:50px;height:50px;background-color:#000;margin:0px;">
<span id='charCount'>150</span><span id='charCount2'> chars.</span>
<input id='txtrsend' src="/assets/txtr-enter.png" height='50px' name="send" type="image" value="Send">
</div>
</div>
</dov>
I have two examples. The first uses a fixed height for the footer as a whole, and floats for the sides. The second uses a variable height footer (based on the "middle" div's content), using a trick that sets the background of the footer to black and the middle part to grey and margins to reveal the background for the rest of the area that the variable-height sides do not extend to (there would be grey underneath the text if not for the margins).
<div id="footer">
<div id="left">50px</div>
<div id="right">50px</div>
<div id="middle">100%</div>
</div>
<div>2:</div>
<div id="footer2">
<div id="left2">50px</div>
<div id="right2">50px</div>
<div id="middle2">100%<br />100%<br />100%</div>
</div>
CSS:
#footer {
height: 115px;
text-align: center;
background: #ccc;
}
#left {
float: left;
height: 100%;
background: #000;
color: #fff;
text-align: center;
width: 50px;
}
#right {
float: right;
height: 100%;
background: #000;
color: #fff;
text-align: center;
width: 50px;
}
#footer2 {
text-align: center;
background: #000;
}
#left2 {
height: 100%;
float: left;
color: #fff;
text-align: center;
width: 50px;
}
#right2 {
float: right;
color: #fff;
text-align: center;
width: 50px;
height: 100%;
}
#middle2 {
margin: 0 50px;
background: #ccc;
}
What about setting margin on inner div?
Just showing style tags for convenience, move to css file.
<style>
.outer {
width: 400px;
background-color: #ddd;
}
.inner {
margin: 0 50px;
background-color: #ccc;
}
</style>
<div class="outer">
<div class="inner">
inner div
</div>
</div>
Related
If someone could help me understand why my "rightdiv" only moves past the lowest one of my "leftdiv". I have tried using "vertical-align: top" but with no effect.
(As you can probably see I am very new to HTML and CSS so please try to help me in a way I could understand to some at least extent)
* {
font-family: Arial, Helvetica, sans-serif
}
body {
background-color: lightgrey
}
.leftdiv {
background-color: whitesmoke;
border-radius: 15px;
width: 79%;
height: 200px;
float: left;
}
.rightdiv {
background-color: whitesmoke;
border-radius: 15px;
width: 20%;
height: 600px;
float: right;
}
.topbar {
background-color: grey;
width: 100%;
height: 75px;
text-align: left;
}
<div class="topbar">
</div>
<br/>
<div class="leftdiv">
</div>
<div class="leftdiv">
</div>
<div class="leftdiv">
</div>
<div class="rightdiv">
</div>
* {
font-family: Arial, Helvetica, sans-serif
}
body {
background-color:lightgrey
}
.leftdiv {
background-color: whitesmoke;
border-radius: 15px;
width: 79%;
height: 200px;
float: left;
}
.rightdiv {
background-color: whitesmoke;
border-radius: 15px;
width: 20%;
height: 600px;
float: right;
}
.topbar{
background-color: grey;
width: 100%;
height: 75px;
text-align: left;
}
<!DOCTYPE HTML!>
<html>
<head>
</head>
<body>
<div class="topbar">
</div>
<br/>
<div class="leftdiv">
</div>
<div class="rightdiv"><!--placed right div near/below leftdiv-->
</div>
<div class="leftdiv">
</div>
<div class="leftdiv">
</div>
</body>
</html>
Here we keep the right div code below 1st left div so its near 1st left div,
the reason is the float: right; property makes it right of the previous div
There are many other CSS solution But if changing the place of right div in HTML works easily why do you want to use CSS stuffs
I want to have gray div with width: (100% - 330px).
It would be easy using 2 div elements if both had bg-color, but I need one with fixed size to be transparent.
I know I can solve this problem with calc(), but I'd prefer to avoid it.
#transp {
width:330px;
float:right;
height: 18px;
}
#grayline {
background-color: #444;
height: 18px;
width: 100%;
}
#grayline2 {
background-color: #444;
height: 18px;
width: calc(100% - 330px);
}
<div>
<!--This how it looks-->
<div id="transp"></div>
<div id="grayline"></div>
</div>
<br />
<div>
<!--This how it should look-->
<div id="grayline2"></div>
</div>
Remove the width from .grayline and add a right margin of 330px:
#transp {
width: 330px;
float: right;
height: 18px;
}
#grayline {
background-color: #444;
height: 18px;
margin-right: 330px;
}
#grayline2 {
background-color: #444;
height: 18px;
width: calc(100% - 330px);
}
<div>
<!--This how it looks-->
<div id="transp"></div>
<div id="grayline"></div>
</div>
<br />
<div>
<!--This how it should look-->
<div id="grayline2"></div>
</div>
you can use margin-right: 330px for .grayline
no need to use 2 divs
#grayline {
background-color: #444;
height: 18px;
margin-right: 330px;
}
#grayline2 {
background-color: #444;
height: 18px;
width: calc(100% - 330px);
}
<div>
<!--This how it looks-->
<div id="grayline"></div>
</div>
<br />
<div>
<!--This how it should look-->
<div id="grayline2"></div>
</div>
Without calc() wrapper class div
<div>
<div class="wrapper">
<div class="trans-wrapper">
<div id="transp"></div>
</div>
<div id="grayline"></div>
</div>
</div>
<br />
<div>
<!--This how it should look-->
<div id="grayline2"></div>
</div>
.wrapper {
display: table;
position: relative;
width: 100%
}
.trans-wrapper {
display: table-cell;
width: 1%;
white-space: nowrap;
}
#transp {
width: 330px;
height: 18px;
white-space: nowrap;
background:red;
}
#grayline {
background-color: #444;
height: 18px;
width: 100%;
display: table-cell;
}
#grayline2 {
background-color: #444;
height: 18px;
width: calc(100% - 330px);
}
Fiddler link https://jsfiddle.net/prnrjdt5/
I've got this short code:
#div1 div {
margin: 0% 0,5%;
display: inline-block;
color: white;
border: 1px dotted yellow;
align: center;
}
#div1 {
margin: 0px auto;
width: 620px;
height: 100px;
background-color: black;
overflow: hidden;
text-align: center;
}
#div2, #div10 {
width: 21px;
height: 100px;
}
#div3, #div9 {
width: 60px;
height: 60px;
}
#div4, #div8 {
width: 70px;
height: 70px;
}
#div5, #div7 {
width: 77px;
height: 77px;
}
#div6 {
width: 85px;
height: 85px;
}
<div id="div1">
<div id="div2">Content2</div>
<div id="div3">Content3</div>
<div id="div4">Content4</div>
<div id="div5">Content5</div>
<div id="div6">Content6</div>
<div id="div7">Content7</div>
<div id="div8">Content8</div>
<div id="div9">Content9</div>
<div id="div10">Content10</div>
</div>
I would like to be able to horizontally align these divs so they are not aligned to the top of my main div but to the center.
I tried it many different ways, such as padding, margin, but i wasn't able to figure out how to do it.
Do you have any idea?
Just add vertical-align:middle; on the rule above:
CSS
#div1 div {
margin: 0% 0,5%;
display: inline-block;
color: white;
border: 1px dotted yellow;
align: center;
vertical-align: middle;
}
DEMO HERE
Hey if you are having some confusion or problem of using vertical-align:middle you can go through below example
I have added a new div inside of div with id div2 to div10 and updated css
#div1 > div {
display: inline-block;
align: center;
margin: 0% 0, 5%;
position: relative;
top: 50%;
}
#div1 > div[id] > div {
transform: translateY(-50%);
color: white;
border: 1px dotted yellow;
}
#div1 {
margin: 0px auto;
width: 620px;
height: 100px;
background-color: black;
overflow: hidden;
text-align: center;
}
#div2 > div, #div10 > div {
width: 21px;
height: 100px;
}
#div3 > div, #div9 > div {
width: 60px;
height: 60px;
}
#div4 > div, #div8 > div {
width: 70px;
height: 70px;
}
#div5 > div, #div7 > div {
width: 77px;
height: 77px;
}
#div6 > div {
width: 85px;
height: 85px;
}
<div id="div1">
<div id="div2">
<div>
Content2
</div>
</div>
<div id="div3">
<div>
Content3
</div>
</div>
<div id="div4">
<div>
Content4
</div>
</div>
<div id="div5">
<div>
Content5
</div>
</div>
<div id="div6">
<div>
Content6
</div>
</div>
<div id="div7">
<div>
Content7
</div>
</div>
<div id="div8">
<div>
Content8
</div>
</div>
<div id="div9">
<div>
Content9
</div>
</div>
<div id="div10">
<div>
Content10
</div>
</div>
</div>
JSFIDDLE: https://jsfiddle.net/9tdzqvot/
I'm trying to create three buttons on either side of my main logo. These buttons should appear vertically center however when applying different display properties and/or margins and padding of 24px~ nothing changes. The attached JSFiddle shows the issue I have.
http://jsfiddle.net/LRaJy/
.header {
width: 100%;
background-color: #64767f;
background-position: bottom;
padding: 10px 0;
}
.header .logo {
background-image: url('../img/header-logo.png');
display:inline-block;
width: 415px;
height: 100px;
background: #fff;
}
.header-container {
width: 733px;
height: 100px;
margin: 0 auto;
}
.hover-buttons {
height: 44px;
display: inline-block;
padding-top: -5px;
}
.hover-buttons .button {
width: 44px;
height: 44px;
display: inline-block;
margin-right: 5px;
background: #fff;
}
with the HTML
<div class="header">
<div class="header-container">
<div class="hover-buttons">
<div class="button backups"></div>
<div class="button currency"></div>
<div class="button contact"></div>
</div>
<div class="logo">
</div>
<div class="hover-buttons">
<div class="button satisfaction"></div>
<div class="button security"></div>
<div class="button care"></div>
</div>
</div>
</div>
Is this what you're looking for?
jsFiddle Demo
.button, .logo {
vertical-align: middle;
}
I would like to create a header that streatches with the page width.
My header consists of three parts, two sides with fixed width and the middle that stretches.
<div class="bigBlueBox">
<div class="headerBox">
<div class="leftSide"></div>
<div class="middleSide"></div>
<div class="rightSide"></div>
</div>
</div>
I use display: box and box-flex: 1 for the stretching of the middle box.
body {
margin: 0;
padding: 0;
}
.bigBlueBox {
height: 45px;
width: 100%;
background-color: blue;
}
.headerBox {
border: 1px solid red;
color: #FFFFFF;
display: -moz-box;
font-weight: bold;
height: 45px;
margin: auto;
width: 100%;
}
.leftSide {
border: 1px solid yellow;
display: inline-block;
float: left;
height: 45px;
width: 20px;
}
.middleSide {
-moz-box-flex: 1;
display: inline-block;
float: left;
height: 45px;
}
.rightSide {
border: 1px solid green;
display: inline-block;
float: left;
height: 45px;
width: 20px;
}
My problem is that, as you can see in this fiddle, there's a margin I can't get rid of (the red border is not around the blue box).
How can I remove this "margin" ?
Otherwise, is there another way to do it without using boxes ?
Well the solution was very simple, I just had to add some content inside the middle div:
<div class="bigBlueBox">
<div class="headerBox">
<div class="leftSide"></div>
<div class="middleSide"> SOMETHING </div>
<div class="rightSide"></div>
</div>
</div>
Which could also be