I'm pretty new to the front-end materials so bear with me
while I try to explain the question.
I'm having an issue trying to align three boxes together side by side.
However, when I try to add the <p> tag within the box, a top margin
gets added. Here is what I mean.
<div class="work-box">
<div class="box">
<div class="idea">
</div>
<p>Hello World</p>
</div>
<div class="box">
<div class="idea">
</div>
</div>
<div class="box">
<div class="idea">
</div>
</div>
</div>
As you can see, the boxes are wrapped within the "work-box" class. Here is the CSS code.
.work-box {
text-align: center;
}
.box {
margin-top: 30px;
display: inline-block;
width: 30%;
height: 300px;
background-color: #495159;
border: solid #A1E8CC thick;
}
.idea {
height: 50%;
background: url('img/idea.svg') center no-repeat;
background-size: contain;
}
I have been struggling with this issue for this whole entire day and I just cannot figure it out. Please help!
Thank you so much.
Solution: Add vertical-align: top to your .box class.
Explanation: The effect that you saw was because for all inline elements, the vertical-align is defaulted to baseline.
This behaves funny when you have inline elements inside of your .box. Because it will try to align the last inline element to the baseline of all your inline elements.
Try adding vertical-align:middle; to the box class.
.box {
margin-top: 30px;
display: inline-block;
vertical-align:middle;
width: 30%;
height: 300px;
background-color: #495159;
border: solid #A1E8CC thick;
}
See Codepen Example here .
You try using <span>Hello world</span> instead of <p> tag. Moreover, <p> tag is out of .idea div. Is it ok? I think it should be inside of <div class="idea">
Related
I'd like to lay out HTML divs relative to one another, like Android's RelativeLayout.
Any idea how to achieve it? Thanks.
EDIT: The question is a general one but I see people request a specific example so here's the one from the link. You can simplify the example layout requirement to be: Blue square from start to finish. Below it two squares: Red and Yellow. Yellow to the right of red till the end. Below the yellow, a green square aligned to the right. Overall 4 divs, laid out relative to one another.
You can put divs on the same 'line' by using the display property in CSS.
Use
display: inline;
or
display: inline-block;
'inline-block' means your div can be given height and width properties while 'inline' will just be the size of your content. In this case, you'll probably want to use inline-block so you can line up your divs.
Found a way using float and clear:
<!DOCTYPE html>
<html>
<body>
<div style="width: 100%; height: 50px; background-color: blue;"></div>
<div style="width: 60%; height: 50px; background-color: red; float: left"></div>
<div style="width: 40%; height: 50px; background-color: yellow; float: left"></div>
<div style="width: 40%; height: 50px; background-color: green; clear:left; float: right">
</body>
</html>
You can play with the code here.
* The purpose of clear:left is to keep the green in the next line - even when the sizes of the red and yellow get changed to pixels instead of percentage.
Like Android, in HTML you cannot directly define Linear or Relative Layout. But through CSS you can define whatever design you want.
For example, in your question you have asked four inputs to align in a particular format.
You can wrap all inputs in a div, and make it align using float property.
The layout is here.
Edit: Here is the layout with .div2_2 in px value.
You can achieve this layout using the following html and css.
HTML
<div class="parent">
<div class="div1">
<input type="text" placeholder="Reminder Name"/>
</div>
<div class="div2">
<div class="div2_1">
<input type="text" value="Wed, Jun 27, 2012"/>
</div>
<div class="div2_2">
<input type="text" value="8.00am"/>
</div>
</div>
<div class="div3">
<div class="div3_1">
<input type="button" value="Done"/>
</div>
</div>
</div>
CSS
div{
padding: 3px 0;
}
input {
width: 100%;
}
.parent{
width: 400px;
}
.div1, .div2, .div3{
width: 100%;
}
.div2{
display: inline-block;
}
.div2_1, .div2_2{
display: inline-block;
}
.div2_1{
width: 55%;
float: left;
}
.div2_2{
width: 44%;
float: right;
}
.div3_1{
width: 30%;
display: inline-block;
float: right;
}
I hope this will be helpful for you.
Check out this page to find out how to layout your webpage in a "Grid System"
getbootstrap.com/css
I haven't used CSS quite often. I always get stuck even when it get's to the simplest layout questions. Even though I am reading a book I cannot figure out how the following works:
I want to design a website which has a header on top, then menu bar and then content. Menu bar and content are working quite good. But I want to have a header with some header text on the left and a logo on the right.
So I have taken this approach:
<div id="headline">
<div id="headertext">Some title<br/>some more title text</div>
<div id="logo"><img src="somelogo.png" /></div>
</div>
And for the CSS:
#headline { overflow: hidden;
height: 224px;
text-align: left;
padding: 0px 80px 0px 80px;
}
#headertext { font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 20pt;
color: #000000;
float: left;
font-weight: bold;
}
#logo {
float: right;
}
So I made the text on the left float: left and the logo on the right float: right. So far so good. Now I want to align both elements to the vertical middle of the parent <div> that has a certain height.
This is what I want it to look like (the blue rectangle is the logo):
I have tried using vertical-align: middle but this does not work out. I have also stumbled across display:table-cell and display: inline but I must have used it in a wrong way or it also does not work. Do I have to use another "wrapper" <div> inside the headline element?
Edit: thanks for the hint about fiddle; I tried to edit one: http://jsfiddle.net/f5vpakdv/
Thank you for your help!
You can achieve this using display: table and display: table-cell, together with vertical-align: middle.
I've removed some irrelevant bits from your original CSS to make it easier to see what's different.
To make it work perfectly after you add padding or margin, check this link: Box Sizing | CSS-Tricks.
<div id="headline">
<div id="headertext">
Some title<br/>some more title text
</div>
<div id="logo">
<div id="fakeImg"></div>
</div>
</div>
...
#headline {
width: 100%;
height: 224px;
background: yellow;
display: table;
}
#headertext {
text-align: left;
}
#headertext,
#logo {
display: table-cell;
width: 50%;
vertical-align: middle;
}
#fakeImg {
width: 100px;
height: 100px;
background: blue;
float: right;
}
Demo
You can use some CSS to accomplish this. Also check for vendor-specific transforms.
.vertical-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Here is a fiddle, and I added another div wrapper.
http://jsfiddle.net/5o3xmfxn/
Updated version of your fiddle:
http://jsfiddle.net/f5vpakdv/1/
I have updated your fiddle here. I simply added display:table; to your wrapping div and gave both inner divs a style of:
display:table-cell;
vertical-align:middle;
I also made a version using flexbox here
I just added the following styles to your wrapping div:
display:flex;
align-items:center;
justify-content:space-between;
I would go for something easier like this. Just put wrapper around the content that you want to center and use a margin-top: http://jsfiddle.net/f5vpakdv/2/
<div id="headline">
<div id="wrapper">
<div id="headertext">Some title some
<br/>more title text</div>
<div id="logo"><img src="somelogo.png" width="198px" height="120px" />
</div>
</div>
</div>
CSS
#wrapper {
margin-top: 60px;
}
I have an issue that whenever I add an "H1" tag to the grid like the following:
<div class="box">
<h1>123</h1>
</div>
the grid design breaks, Please check the following example
http://jsfiddle.net/937yhqo1/
Appreciate your help.
Update
as #chipChocolate.py answerd that the vertical align solves the issue, but I want to know the reasons, why just when we add H1 tag(any tag with display block) the grid breaks? how does the display inline-block behave at that moment?
Use vertical-align: top alongwith display: inline-block in .box.
.container {
height: 200px;
background: blue
}
.box {
height: 100px;
display: inline-block;
vertical-align: top;
background-color: red;
width: 50px;
margin: 2px
}
<div class="container">
<div class="box"></div>
<div class="box">
<h1>123</h1>
</div>
</div>
There are some answers to a similar question already, but this one has a twist.
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-3 grey">
<div class="wrapper">
<div class="info">(i)</div>
<div class="text"><div class="labeled">This is a long text</div></div>
<div class="icon">[$]</div>
</div>
</div>
<div class="col-xs-12 col-sm-9 green">
Content
</div>
</div>
So I need three divs, aligned in one line at all conditions - info, text, icon - with two divs on the sides having fixed h/w, and one in the middle taking only as much space, as
either it needs, and not more
or is available for it, cutting the context with overflow:hidden
Here is the fiddle http://jsfiddle.net/L7tmt5w1/3/
Here are my mad skills in sketching ideas http://imgur.com/tF0HkD2
For those, who want to feel my pain, you may also try re-ordering the divs - text, icon, info - when the screen size goes mobile (bootstrap's col-xs-)
You can use the display: table-cell; method for this situation:
.wrapper {
display: table;
text-align: right;
width: 100%;
}
.info {
width: 20px;
height: 20px;
display: table-cell;
background-color: #005ea8;
color: #fff;
}
.icon {
width: 20px;
height: 20px;
display: table-cell;
background-color: #eb690b;
color: #fff;
}
.text {
display: table-cell;
background-color: #ccc;
width: auto;
}
This mimics the table display properties and keeps all the children of .wrapper inline and the middle one "elastic" as it has no defined width. You can also remove the floats.
http://jsfiddle.net/L7tmt5w1/7/
maybe this solution will help you DEMO
<aside class="panel">
...
</aside>
<div class="content">
...
</div>
.content {
overflow: hidden;
border: 1px solid;
}
.panel {
float: right;
width: 200px;
border: 1px solid;
}
You can try this http://jsfiddle.net/L7tmt5w1/3/
Remember: If you want to float an element to the right, it must be the first element. For example:
<div style="float:right"></div>
<div style="float:left"></div>
AND DIV's are already block elements, so you don't have to add display:block to a DIV-element
I don't know if this is what you want: jsfiddle
if not content on "text" no div... if too much content it's hidden
(but you can add
overflow:auto
to the text div for scroll bars
I have a div containing a title text and an image.
With the code below, the title is showing just above the image.
HTML code:
<div class="thumbnail">
<div class="text">
<center>Heading</center>
</div>
<div class="image">
<img src="sample.png">
</div>
</div>
I would like to align the title so that it will appear on the center (vertically and horizontally) of the image.
How can I achieve that using HTML and CSS?
You could remove the image tag and make the image be the background of the container div.
HTML
<div class="text">
Heading
</div>
CSS
.text {
background-image: url('sample.jpg');
text-align: center;
}
EDIT: I don't want to sell it as my perfect answer, but I realized I missed the vertical alignment, and as similar solutions have already been provided here in comments and answers, let me just provide you with a good source of info below. The point is that you could use vertical-align:middle if you used span or other inline element, but with div, you have to use other tricks like position:absolute and minus margins.
Source: http://phrogz.net/css/vertical-align/index.html
Your markup is mostly correct with the exception of using the center element and you do not need to wrap the img element in a div.
Here is some example markup:
<div class="thumbnail">
<h1>Heading</h1>
<img src="sample.png">
</div>
And its corresponding CSS:
.thumbnail {
position:relative;
}
.thumbnail h1 {
text-align:center;
position:absolute;top:50%;left:0;width:100%;
margin-top:-20px; /*make the negative top margin = half your h1 element height */
}
You could always use an element other than an h1 to hold your title. This just depends on your preference.
The following might help you.
HTML:
<div class="thumbnail">
<div class="text">
Heading
</div>
</div>
CSS:
.text {
background-image: url('http://cs616623.vk.me/v616623331/7991/vPKjXbo-c7o.jpg');
width: 320px;
height: 240px;
line-height: 240px;
vertical-align: middle;
text-align: center;
font-size: 48px;
}
Take into account that in this approach you would have to set manually the height and the width of your text element. Moreover, the height should be duplicated in the line-height in order for vertical alignment to work correctly.
You could test and change the code in the corresponding JSFiddle or just check the full-screen result.
I wouldn't recommend using lineheight to vertically align the text(as some answers suggest) solely because if the header is to long and spans over across two rows it would look terrible.
What I would do is to absolute position the heading and then use display: table-cell to vertical align it.
Note that to be able to use this solution you have to specify an height for the heading.
HTML
<div class="thumbnail">
<div class="text">
<h1>Heading</h1>
</div>
<div class="image">
<img src="http://placehold.it/350x250" />
</div>
</div>
CSS
.thumbnail{
position: relative;
display: inline-block;
}
.text{
position:absolute;
top: 0px;
left: 0px;
width: 350px;
}
.text h1{
height: 250px;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 350px;
color: #fff;
}
JSfiddle here