For whatever reason this image is making the rest of the markup to not align within it's container, despite it is set to display inline-block.:
http://jsfiddle.net/ncQXD/
For you guys should be something simple. For me, I already spent days trying to solve this problem.
By the way, I do not want to use float. I do not fully know how to control their weirdness and do not have time atm to learn it. I'll appreciate if you could please not use them. HOWEVER, I can take a crash course on floats if you lead me to one that covers all their mishaps and such.
For now, I need to stick to a non-float css.
PS. The borders are just for "debugging" and are really not necesary
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css_test2.css" />
</head>
<body>
<div id="header">
<img src="http://img710.imageshack.us/img710/938/imgbz.png" id="logo">
Title goes here
<span id="social_media">Social media links</span>
</div>
</body>
</html>
CSS:
#header {
border: 1px solid red;
width: 800px;
height: 123px;
margin: 0px auto;
padding: 0px;
background-color: rgb(181, 230, 29);
}
#logo {
border: 1px solid red;
display: inline-block;
width: 172px;
height: 123px;
}
#logo_txt {
border: 1px solid black;
display: inline-block;
width: 100px;
height: 123px;
}
#social_media {
border: 1px solid black;
display: inline-block;
width: 300px;
height: 123px;
text-align: right;
}
The quickest way to fix this is to add vertical-align: top to the #logo styles.
Add
vertical-align:text-top;
to your image style, vertical-align:top; would work too but I used text top since its aligning against text
The default vertical alignment is baseline, which would align the bottom of the image with the text in the other divs.
FIDDLE
Hi i if you used display inline-block in any way than define one properties
vertical-align:top;
Because by default properties is vertical-align:middle; so than define verticle-align properties.
and now sam think in img tag Define your img tag properties in your css verticel-align:top
.
float the elements to the left and everything works: http://jsfiddle.net/ncQXD/1/
I added this CSS:
#header > * {
float: left;
}
#header {
overflow: auto;
}
Related
I have the following HTML code:-
<html>
<head>
<meta charset="utf-8">
<title>Personal Site</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="header1">
hello world
</div>
<div class="header2">
</div>
<div class="header3">
</div>
</body>
</html>
Below is the style defined in the style sheet:-
.header1{
background-color: yellow;
width: 35%;
height: 200px;
display: inline-block;
}
.header2{
background-color: blue;
width: 30%;
height: 200px;
display: inline-block;
}
.header3{
background-color: green;
width: 34%;
height: 200px;
display: inline-block;
}
I am getting the following output:-
Question: Despite defining my display property as inline-block, why is the yellow box along with Hello World going in the second line? If I remove the text Hello world then all three box lines up together?
Can someone please explain this behavior?
The inline-block display property treats block level elements (e.g. ) as an inline element (e.g. ), and, just like if you had a line break between two elements, the line-break between the s is creating a space between the s. That extra margin is actually a space—not a margin.
ref: more details...
apply 'float:left' to each header block.
.header1{
background-color: yellow;
width: 35%;
height: 200px;
display: inline-block;
float:left;
}
.header2{
background-color: blue;
width: 30%;
height: 200px;
display: inline-block;
float:left;
}
.header3{
background-color: green;
width: 35%;
height: 200px;
display: inline-block;
float:left;
}
Seems to be a quirk of inline-block. If you add vertical-align:top; it sorts it out.
.header1{
background-color: yellow;
width: 35%;
height: 200px;
display: inline-block;
vertical-align:top;
}
.header2{
background-color: blue;
width: 30%;
height: 200px;
display: inline-block;
vertical-align:top;
}
.header3{
background-color: green;
width: 34%;
height: 200px;
display: inline-block;
vertical-align:top;
}
The following is a theory, based on reading the Visual formatting model document provided by the W3C. I'm most likely wrong on at least part of this, but:
By applying display: inline-block to the div elements, the end result is
the divs themselves are inline
the content inside each div gains a, let's call it a "virtual container", that's a block element (or treated as such).
Inline elements collapse to the height and width of their content. In the second and third divs, since those are empty, means those collapse to a height of 0. The boxes you see are actually the inner content overflowing the parent divs.
The three elements all have a default vertical-align value of baseline, so I suspect what you're ultimately seeing is three divs aligned in a row, to the baseline of the first div, but then the bottom of the inner content of the latter divs is aligning to the baseline of the first div, with their tops pushing the whole row down from the top of the page.
Adding the the old "has-layout" trigger will cause the inline elements to resize to fit their content, if that's all you're after (you'll want to run this with the full-screen option to see it correctly):
.my-block{
height: 200px;
display: inline-block;
/* these rules applied together trigger hasLayout */
/* see https://webplatform.github.io/docs/css/cssom/properties/hasLayout/ */
overflow: auto;
zoom: 1;
}
.header1{
background-color: yellow;
width: 35%;
font-size: 25px;
}
.header2{
background-color: blue;
width: 30%;
}
.header3{
background-color: green;
width: 34%;
}
<html>
<head>
<meta charset="utf-8">
<title>Personal Site</title>
</head>
<body>
<div class="header1 my-block">
hello world
</div>
<div class="header2 my-block">
</div>
<div class="header3 my-block">
</div>
</body>
</html>
Changing the vertical-align to top or bottom would yield the same effect in your example, although you'd need to make sure either of those alignments make sense in your "real" code.
I am learning html and i cant understand why when i have two lines inside one div the second line doesn't fall within the borders of the div.
<html>
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="testingsite.css">
</head>
<body>
<div><header><h3>Line 1</h3>
<br><h5>Line 2</h5></header></div>
</body>
My css isn't showing in a code block properly so i put a jsfiddle link below.
Thanks for any help.
https://jsfiddle.net/xLjsmrfc/
you can try this one:
add height :auto;
body {
background-color: white;
border: 5px solid blue;
}
header {
text-align: center;
height: auto;
box-sizing: border-box;
border: 5px solid blue;
width: 100%;
}
DEMO HERE
You have a height property set in the CSS for the header tag.
height: 75px;
This restricts the height of the <header>, and thus the border. Remove the height property and things will correct.
Dear you are writing the code right but there is a small flaw in Css.
Both lines are falling within the Div just height of Div is Creating dilemma for you.
I've two methods for you :
----------1. Altering Your own code----------
body {
background-color: white;
border: 5px solid blue;
}
header {
text-align: center;
height: 155px;
box-sizing: border-box;
border: 5px solid blue;
width: 100%;
}
----------2. Second My Way :----------
<style>
body {
background-color: white;
border: 5px solid blue;
}
#myid{
text-align: center;
height: 155px;
box-sizing: border-box;
border: 5px solid blue;
width: 100%;
}
</style>
</head>
<body>
<div id="myid">
<header>
<h3>Line 1</h3><br>
<h5>Line 2</h5>
</header>
</div>
</body>
The problem is really with the styling you've done.
Change the div height to something like greater than the current 75px
header {
text-align: center;
height: 105px;
box-sizing: border-box;
border: 5px solid blue;
width: 100%;
}
Whenever you are using heading tag then those tags are taking their own padding and margin by which they are out of your border as you have given height to container so use heading tag according to your need.
Header tags ( h1...h5 ) have some default margins.
You can add the margin:0px for that and it will work fine.
I want to make two divs equal heights – left and right divs.
I referred the following posts and found a bottom padding approach.
How do I achieve equal height divs (positioned side by side) with HTML / CSS ?
CSS: How to make left float div to adjust height dynamically?
I tried to apply this concept in my page; but it doesn’t work correctly. On top of the right div there is unwanted space. How can we rectify it?
CODE
<!DOCTYPE html>
<style type="text/css">
.myContent {
width: 100%;
border: 2px solid violet;
min-width: 1210px;
}
.myHeader {
width: 100%;
/*width: 1200px;*/
clear: both;
background-color: #DFE8EF;
border: 1px solid red;
}
.leftPart {
border: 1px solid red;
width: 200px;
height: 200px;
float: left;
background-color: silver;
}
.rightPart {
border: 1px solid orange;
background-color: beige;
float: left;
min-width: 1000px;
/*
margin-bottom: -1000px;
padding-bottom: 1000px;
margin-right: -5000px;
padding-right: 5000px;
*/
}
</style>
<html>
<head>
<title>UpdateAccrualByItem</title>
<link href="Content/MasterLayoutStyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="body">
<div class="myContent">
<div class="myHeader">
<img src="/Images/logo_header.jpg" />
</div>
<div class="leftPart">
Menu
</div>
<div class="rightPart">
<h2>UpdateAccrualByItem</h2>
</div>
</div>
</div>
</body>
</html>
You are very close, but just have a few little things wrong.
You don't need a width for the right column, just the default width:auto. I used the same negative margin and padding trick to make the right column's height the size of the left's height and also to give the right column the illusion of taking up the rest of the space. You also should float the right container and take away the margin. You can remove the clear:both of the left column because it's not used
Demo here
.leftPart {
border: 1px solid blue;
width: 200px;
height:200px;
float:left;
background-color: orange;
}
.rightPart {
border: 1px solid orange;
background-color: beige;
float:left;
margin-bottom: -1000px;
padding-bottom: 1000px;
margin-right: -5000px;
padding-right: 5000px;
}
Edit
You might also add some type of #media query to allow adjusting the window to look more smooth. Here is an example. It's semi-hard coded based on the text length in the example, but on your final product it might be something you add on at the end
My problem is fairly simple but has me really stumped.
(The RHS pic is the problem!)
I have a thumbnail with the following css:
float: none;
margin-right: 0;
display: block;
and to the right of that I have some text with the following css:
position: relative;
text-decoration: none;
text-indent: 0;
Now this works great! However, when the user resizes the window the text jumps below the thumbnail which I don't want (I'm using a responsive website)! How can I prevent this happening the text behaving like this?
I have been playing around with it for ages and can't solve this problem:(.
You can add float left attribute to your image and span text, and add to a margin left to your text
.box {
width: 210px;
vertical-align: text-top;
display: table-cel
}
.box img {
float: left;
width: 100px;
height: 100px;
}
.box span.text {
float: left;
width: 100px;
box-sizing: border-box;
}
Can you view an example in jsfiddle: here
As per my understanding, the reason might be:
There may be some float left given to the thumbnail image somewhere
inside the style written for lower screen sizes. The best
thing you can do is, inspect using firebug or something and check
whether any float left is given to the thumbnail image. If so, remove that, or give it as
float as none.
If you are ok with having the entire text below the image when the screen is resized, you can make use of clear: both for lower screen size, which has to be given the text div.
If you could give a link to review, it will be easy to tackle the real problem. Hope my solution helps. Thank you :-)
This appears to do what you want:
<html>
<head>
<style>
img {
float: left;
width: 40px;
height: 40px;
border: 1px solid gold;
margin-left: 5px;
}
.text {
margin-left: 50px;
}
.container {
width: 150px;
border-left: 3px solid red;
}
</style>
</head>
<body>
<div class="container">
<img>
<div class="text">This should stay aligned and not go under the thumbnail.</div>
</div>
</body>
</html>
I am trying to have a header that is split three ways (a logo to the left, something in the middle, and something else to the right). The width of the header is 100%.
The issue I am having is that the right part only appears lower (under the info in the middle div). Not sure how to simply display the right part to the right in that case. I might not be explaining this very well, let me know if I can clear this up further.
<div id="header">
<div id="logo">
logo
</div>
<div id="header-middle">
</div>
<div id="header-right">
</div>
</div>
with the css:
#header {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 25px;
background-color: #fafafa;
height: 55px;
border-bottom: 1px solid #d3d3d3;
overflow: auto;
}
#logo {
font-size: 24pt;
color: #08a3d9;
width: 100px;
float: left;
}
#header-middle {
width: 300px;
margin-left: auto;
margin-right: auto;
}
#header-right {
float: right;
width: 300px;
margin-right: 20px;
text-align: center;
}
Your CSS is fine. Just move #header-middle last in your HTML. Then what is float: right will go right, float: left will go left, and the middle content will fill upwards and occupy the unclaimed middle space. What is happening the way you have it, is the unfloated element is pushing the floated element after it.
<div id="header">
<div id="logo">
logo
</div>
<div id="header-right">
</div>
<div id="header-middle">
</div>
</div>
If changing the HTML order is not an option, then just assign widths to everything, and float all the items left.
Here's another solution for your consideration:
In the code below, I've removed all floats and used relative sizing to allow your design to better handle narrow ...
... and wide ...
... screen widths more responsively.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#header {
padding: 25px 10px;
height: 55px;
border-bottom: 1px solid #d3d3d3;
overflow: no-content;
min-width: 400px;
}
div#header div {
display: inline-block;
padding: 1% 0;
margin: 0 2%;
text-align: center;
border: 4px dashed; /* Useful for positioning */
font-size: 2em;
}
#logo {
color: #08a3d9;
width: 20%;
border-color: red;
}
#header-middle {
width: 40%;
border-color: green;
}
#header-right {
width: 20%;
border-color: blue;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
logo
</div>
<div id="header-middle">
middle
</div>
<div id="header-right">
end
</div>
</div>
</body>
</html>
I'd also recommend using something like HTML5 Boilerplate or Columnal that provide a decent responsive grid system so that your site works beautifully on both desktop & mobile.
I made another jsFiddle for you.
updated http://jsfiddle.net/zGfh7/
My answer is much more complicated than magi's, but it also works.
I added float: left to the middle header.
Also, I changed the widths of all the headers to 33%, and removed all margin-left and paddings, etc, to make things more clean. You can keep or change the 33% widths to your preference, but making sure that all the widths add up to 100% ensures that the header is nicely filled.
I've also added background-colors so you can see that things align nicely.