Trying to do simple header for website, [image][text][splitted horizontal section]:
<div style="width: 930px;">
<div style="width: 280px; height: 80px; display: inline; background-color: red;">image</a></div>
<div style="width: 400px; height: 80px; display: inline; background-color: blue;">text</div>
<div style="width: 250px; height: 80px; display: inline; background-color: green;">
<div style="text-align: right; height: 40px; background-color: gray;">some bar</div>
<div style="text-align: right; height: 30px; background-color: yellow;">some buttons </div>
</div>
</div>
What I see in VS2010 and IE8:
What I see in Chrome and FireFox:
Why? And how to fix it? I need the first variant of course.
Add float: left to your inline elements.
http://jsfiddle.net/tmKaU/1/
I think this is what you are looking for:
<div style="width: 930px;">
<div style="display: block; float:left; width: 280px; height: 80px; background-color: red;">image</a></div>
<div style="display: block; float:left; width: 400px; height: 80px; display: block; background-color: blue;">text</div>
<div style="display: block; float:right; width: 250px; height: 80px; display: block; background-color: green;">
<div style="text-align: right; height: 40px; background-color: gray;">some bar</div>
<div style="text-align: right; height: 30px; background-color: yellow;">some buttons </div>
</div>
</div>
Related
I am trying to build a simple page where I was wondering how do I make the circle with the paragraph comes on top of the rectangle so that the rectangle and the text will appear in the front(on the top)? thank you so much for your help,
.dot {
height: 200px;
width: 200px;
background-color: lightgrey;
border-radius: 50%;
display: inline-block;
margin-bottom: -5rem;
}
.rectangle {
height: 200px;
width: 850px;
background-color: #555;
}
.rectangle-vertical-1 {
height: 180px;
width: 120px;
background-color: lightgrey;
display: inline-block;
margin: 6%;
}
.rectangle-vertical-2 {
height: 180px;
width: 120px;
background-color: #a3a3a3;
display: inline-block;
margin: 6%;
}
.rectangle-vertical-3 {
height: 180px;
width: 120px;
background-color: #4d4c4c;
display: inline-block;
margin: 6%;
}
.rectangle-vertical-container {
position: relative;
margin-top: -9rem;
"}
<div class="container">
<div style="position: relative;">
<div style="text-align:center">
<div class="dot">
<h4>Melrose</h4>
<p>abc</p>
</div>
<div>
<div style="text-align:center">
<div class="rectangle">
<img class="img" src="https://pic4.zhimg.com/v2-34c6587aa75dd33470cf5f4dddcb6923_1200x500.jpg" alt=""> </div>
<div class="rectangle-vertical-container">
<span class="rectangle-vertical-1"></span>
</div>
</div>
</div>
</div>
I am having a problem getting the Circle text to the correct position. Specifically its vertical position. It is supposed to be centered both vertically and horizontally. And that must change.
I'm trying to get a button in the middle of the page. The two other divs will be filled in later.
body {
padding: 0;
margin: 0;
font-family: "Lato", sans-serif;
}
<div style="background-color: grey; position: static;height: 80px">
<div style="width: 45%; height: 80px; background-color: #123456; float: left;"></div>
<div style="width: 10%; height: 80px;float: left; background-color: blue; text-align: center">
<span style=" background-color: green; font-size: 70px; cursor:pointer; display: inherit; height: 80px" >⚇</span>
</div>
<div style="width: 45%; height: 80px; background-color: #123456; float: left;"></div>
</div>
It's likely an easy fix. Thank you for your time.
You can use the line-height property to make adjustments to vertical alignment in this situation. See snippet below.
body {
padding: 0;
margin: 0;
font-family: "Lato", sans-serif;
}
<div style="background-color: grey; position: static;height: 80px">
<div style="width: 45%; height: 80px; background-color: #123456; float: left;"></div>
<div style="width: 10%; height: 80px;float: left; background-color: blue; text-align: center">
<span style="line-height:1.2; background-color: green; font-size: 70px; cursor:pointer; display: inherit; height: 80px" >⚇</span>
</div>
<div style="width: 45%; height: 80px; background-color: #123456; float: left;"></div>
</div>
Fiddle: https://jsfiddle.net/eze5x9t9/
HTML:
<div style="width: 100%; overflow: hidden; height: 65px; background: #00CC00;">
<div style="width: 60%; overflow: hidden; float: left; background: #3074A3; color: #EDEDED; height: 65px; text-align: center; display: table; vertical-align: middle;">
<span style="font-size: 35px;display: table-cell;vertical-align: middle;">My Name</span>
</div>
<div style="width: 40%; overflow: hidden; float: left; background: #266996; color: #EDEDED; height: 65px; text-align: center; display: table; vertical-align: middle;">
<span style="font-size: 20px;display: table-cell;vertical-align: middle;">My Job</span>
</div>
</div>
Screenshot:
Why is there a green space at the end? The fiddle was done in Chrome.
It's a common BUG for the WebKit browsers, no fixing actually.
reference:
https://lists.webkit.org/pipermail/webkit-unassigned/2006-January/002684.html
https://css-tricks.com/percentage-bugs-in-webkit/
http://www.screenr.com/pvB8
Somehow in Chrome the outer div is exactly one pixel wider than the contained divs.
You could however solve that by not using display: table; and display: table-cell; (if you only did that to make the vertical centering work) like so:
<div style="width: 100%; height: 65px; background: #00CC00;">
<div style="width: 60%; float: left; background: #3074A3; color: #EDEDED; height: 65px; text-align: center;">
<span style="font-size: 35px; line-height: 65px;">My Name</span>
</div>
<div style="width: 40%; float: left; background: #266996; color: #EDEDED; height: 65px; text-align: center;">
<span style="font-size: 20px; line-height: 65px;">My Job</span>
</div>
</div>
Edit: A second code snippet showcasing the standard method for vertical centering using absolute positioning and transform: translate:
.outer {
height: 65px;
background-color: #00cc00;
display: flex;
}
.inner {
width: 60%;
float: left;
background: #3074A3;
color: #EDEDED;
height: 65px;
text-align: center;
font-size: 35px;
position: relative;
}
.inner + .inner {
width: 40%;
background: #266996;
font-size: 20px;
}
.inner > span {
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div class="outer">
<div class="inner">
<span>My Name</span>
</div>
<div class="inner">
<span>My Job<br />Good job!</span>
</div>
</div>
For some reason, attribute vertical-align: middle; is not applied to span tag. Here is the code:
<div style="position: relative; background-color: gray; padding: 1%; width: 100%; height: 60px;">
<div style="background-color: green; width: 50%; height: 100%">
<span style="position: absolute; display: inline-block; text-align: center; width: 100%; vertical-align: middle">
50%
</span>
</div>
</div>
Since you know the height of the outer div is 60px, you can set the line-height of the span to match it:
<div style="position: relative; background-color: gray; padding: 1%; width: 100%; height: 60px;">
<div style="background-color: green; width: 50%; height: 100%">
<span style="position: absolute; display: inline-block; text-align: center; width: 100%; vertical-align: middle;line-height: 60px;">
50%
</span>
</div>
</div>
You could use line-height to center your text vertically, in this case use line-height: 60px
<div style="position: relative; background-color: gray; padding: 1%; width: 100%; height: 60px;">
<div style="background-color: green; width: 50%; height: 100%">
<span style="position: absolute; display: inline-block; text-align: center; width: 100%; line-height: 60px;">
50%
</span>
</div>
</div>
I use inside of div tag, 4 div tags to divide to 4 equal areas using following tag.
Is there any other way to divide or improve this division
<div style="width: 689px; margin-left: 215px; margin-top: 0px; float: none; height: 502px;">
<div style="width: 336px; height: 251px; display: inline-block; float: left;">
</div>
<div style="width: 336px; height: 251px">
</div>
<div style="width: 336px; height: 251px; display: inline-block; float: left;">
</div>
<div style="width: 336px; height: 251px">
</div>
</div>
Use <div style="width: 50%; height: 50%"> for inner divs.
There are no other improvements i can suggest you about styles.
In the other hand, if you want to see divs while designing, i can suggest you to assign them temporary background colors like:
<div style="width: 689px; margin-left: 215px; margin-top: 0px; float: none; height: 502px;background-color:gray">
<div style="width: 50%; height: 50%; display: inline-block; float: left;background-color:yellow">
</div>
<div style="width: 50%; height: 50%;background-color:red;float: left">
</div>
<div style="width: 50%; height: 50%; display: inline-block; float: left;background-color:green">
</div>
<div style="width: 50%; height: 50%;background-color:blue;float:left">
</div>
</div>
EDIT: Thanks to background colors, i realised that your floating divs hide other ones. You should add float:left for all inner divs.
Is this your desired effect?
.container {
display: flex;
height: 300px;
}
.container div {
flex: 1;
}
<div class="container">
<div style="background:red">A</div>
<div style="background:blue">B</div>
<div style="background:lime">C</div>
<div style="background:cyan">D</div>
</div>
Or is this?
.container {
height: 300px;
width: 300px;
}
.container div {
width: 50%;
height: 50%;
float: left;
}
<div class="container">
<div style="background:red">A</div>
<div style="background:blue">B</div>
<div style="background:lime">C</div>
<div style="background:cyan">D</div>
</div>