I have one div container called row3red3
Inside I have 2 divs, left (.row3red3slika) and right(.row3red3info).
I can't right divs .row3red3info to set on top inline after image.
I tried and set width for .row3red3slika but not working, i have problem i think with row3red3slika width.?
HTML
<div class="row3red3">
<div class"row3red3slika">
<img src="img/slika2.jpg" alt="Slika2" height="150px" width="215px">
<div class="imgtext1">
<span><i class="fa fa-university"></i></span>
</div><div class="imgtext2">
<span>PORTSAID EGYPT</span>
</div>
</div>
<div class="row3red3info">
<span>text</span>
</div>
</div>
CSS
.row3red3{
width:900px;
padding-left: 15px;
padding-top: 15px;
}
.row3red3slika{
width:215px;
height:150px;
}
.row3red3 .imgtext1{
display:inline-block;
position: relative;
background-color:#3E6373;
color:white;
margin-top: 95px;
margin-left:10px;
padding: 4px;
}
.row3red3 .imgtext2{
display:inline-block;
position: relative;
font-size: 14px;
background-color:#3E6373;
color:white;
font-family: 'Roboto Condensed', sans-serif;
margin-top: 60px;
padding: 4px;
}
.row3red3 img{
position: absolute;
display:inline-block;
vertical-align: top;
}
.row3red3info{
font-size:20px;
}
Add float: left; to .row3red3, .imgtext1 and .row3red3info, and .row3red3 img. Also you missed a = in:
<div class"row3red3slika">
it should be:
<div class="row3red3slika">
Have you tried floating your inner divs?
.row3red3info {float:right;}
.row3red3slika{float:left;}
Might help to set up a jsfiddle for this.
you can use float:left . also if you want to get rid of coding you can use Bootstrap. it does have a perfect grid system that is totally customizable
here a link to it's grid system tutorial http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
Related
Stuck on a problem where when I enter text in a div with display property set to inline-block. Here's the HTML:
<div class="row" id="section">
<div class="sectionheading">
</div>
<div class="sectionheading">
</div>
<div class="sectionheading">
</div>
<div class="sectionheading" id="sectionheading">
<span>Text</span>
</div>
</div>
CSS:
.sectionheading {
display: inline-block;
width: 6px;
background-color: #df5e5e;
height:35px;
}
#sectionheading {
width: 150px !important;
}
#section {
margin-left:10px;
margin-top: 40px;
}
The problem is with the div having id 'sectionheading'. When I have text in it like in the HTML given it shifts downwards for some reason, however when the div is empty it is aligned properly with the other divs. What's the problem here?
Use vertical-align: top; will solve your issue.
If you are using display: inline-block; you need to set vertical:align property of the div. Because default it's vertical-align value is baseline.
.sectionheading {
background-color: #df5e5e;
display: inline-block;
height: 35px;
vertical-align: top;
width: 6px;
}
Check Fiddle Here.
Try like this: Demo
.sectionheading {
vertical-align:top;
}
Another option for solve this issue..
.sectionheading {
display: inline-block;
width: 6px;
background-color: #df5e5e;
height:35px;
float: left;
margin-right:10px;
}
#sectionheading {
width: 150px !important;
}
#section {
margin-left:10px;
margin-top: 40px;
}
<div class="row" id="section">
<div class="sectionheading">
</div>
<div class="sectionheading">
</div>
<div class="sectionheading">
</div>
<div class="sectionheading" id="sectionheading">
<span>Text</span>
</div>
</div>
The reason why such happens when there is text is because there is a height given by default and with no proper padding height added. You can either add vertical-align: top; or add line-height: 24px; and remove height.
Fiddle : Example
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'm trying to place two classes on the same line on opposite sides of a div.
I want the two buttons: Login & Register to be on extreme sides of the #home-button and on the same line.
Here is the HTML code:
<div id="content">
<div id="lcol" class="lfloat">
Hello
</div>
<div id="home-button" class="rfloat">
<div class="login-button Login">Login</div>
<div class="login-button Register">Register</div>
</div>
</div>
My CSS:
.login-button{
background:#4578bc;
color:#fff;
padding:15px 20px;
text-align:center;
}
#home-button{
width:100px;
margin:100px 0 0 0;
}
.lfloat{float:left}
.rfloat{float:right}
However, no matter what I try, the two buttons: Login & Register end up being on the same side on different lines.
The reason Login and Register are on different lines is because they are both block-level elements. You have to float one or both of them to put them on the same line, or make them inline.
Here is an example:
http://jsfiddle.net/K2Rtr/
<div id="right">
<div id="right-left">Login</div>
<div id="right-right">Register</div>
</div>
#right { float: right; width: 100px;}
#right-left {float: left; }
#right-right {float: right;}
In this example, Login and Register are on opposites sides of a div that is 100px wide and floated right.
Try following style,
.login-button {
background:#4578bc;
color:#fff;
padding:15px 20px;
text-align:center;
display:inline-block;
}
#home-button {
margin:100px 0 0 0;
}
http://jsfiddle.net/YvUER/
You can try this :
Edit :
.login-button {
background: #4578BC;
color: white;
padding: 15px 20px;
text-align: center;
width: 100px;
float: left;
}
#home-button {
width: 282px;
margin: 100px 0 0 0;
float: right;
}
If you use float:right; means it will create problems in bigger size monitor and high resolutions, so you can use left: 35%; position: absolute; for div2 to solve resolution issues.
happy coding...
I have an element that's 60px tall that has other elements like an image and a couple of spans inside of it and I'm having trouble getting them to align vertically inside the 60px high element. Here's the mockup and CSS:
<div class="member">
<img src="images/pic.png" alt="John Smiths's Profile Picture" class="pic">
<span class="name">John Smith</span>
<span class="skills">PHP, MySQL, Javascript, C#, Java</span>
</div>
#sidebar .member {
height: 60px;
margin-bottom: 10px;
vertical-align: center;
}
#sidebar .member .name {
font-size: 15px;
font-weight: bold;
}
#sidebar .member .pic {
width: 50px;
height: 50px;
border-radius: 50%;
float: left;
margin-right: 10px;
}
#sidebar .member .skills {
display: block;
font-size: 12px;
overflow: hidden;
}
I've put it up on jsfiddle: http://jsfiddle.net/CYFyx/2/
As you can see, the elements within the .member element push to the top. I need them vertically aligned like so:
Already tried vertical-align: middle; but with no luck.
You can use vertical-align: middle in td table layout only. So you have to add a div around the spans
<div class="cell">
<span class="name">John Smith</span>
<span class="skills">PHP, MySQL, Javascript, C#, Java</span>
</div>
with this properties
#sidebar .member .cell {
display: table-cell;
vertical-align: middle;
height: 50px;
}
You can test it here: http://jsfiddle.net/Tn2RU/
Try putting them all in a div that you can vertically align using
position:relative;
margin-top: auto;
margin-bottom: auto;
height: XXpx;
You need to set the width of a parent element and width of your children so they must go into next line.
The other posibility would be to set your parent element to position:relative and then use position:absolute on all children and simply, precisely position them with top:20px; , then next one top:40px; etc etc.
With this second solution you can get exact pixel positioning of all children elements.
That shall positively give you best results.
You could also put them into a div and add padding to the top.
HTML
<div id="block">
<span class="name">John Smith</span>
<span class="skills">PHP, MySQL, Javascript, C#, Java</span>
</div>
CSS
#block {
padding-top:5px;
}
jsFiddle
I want to center four links in a div.
This is what I did so far: jsfiddle
Html:
<div id="menu">
<section>
<a class="top" href="#">Top</a>
<a class="left" href="#">Left</a>
<a class="right" href="#">Right</a>
<a class="bottom" href="#">Bottom</a>
</section>
</div>
Css:
#menu {
width: 200px;
height: 200px;
border: 1px solid #000;
background: #eee;
position: relative;
padding: 10px;
}
#menu>section {
position: absolute;
text-align: center;
width: 200px;
}
#menu a {
display: block;
vertical-align: middle;
height: 20px;
}
#menu .left {
float: left;
height: 160px;
}
#menu .right {
float: right;
}
#menu .bottom {
clear: both;
}
The problem is that the floated elements do not vertically centered as they should. I want the left and right elements to be in the middle and not at the top.
May be you can use line-height property for this. Like this:
#menu .left, #menu .right {
height: 160px;
line-height:160px;
}
http://jsfiddle.net/YdPzP/13/
try adding
.left, .right { line-height: 160px; }
Since you are already using html5, I would say aside tag would probably come in handy in your case:
here is a Sample
DEMO
You can use padding for vertically aligning the links
<div id="menu">
<section>
<a class="top" href="#">Top</a>
<div class="middle">
<a class="left" href="#">Left</a>
<a class="right" href="#">Right</a>
</div>
<a class="bottom" href="#">Bottom</a>
</section>
</div>
add the below css:
#menu div.middle{
height:90px;
padding-top:60px;
}
I ran into a seeming conflict between float:left; and vertical-align: middle;
In my case, I wanted several small images to line up horizontally. Some of them were the right size vertically and the others weren't tall enough, so i wanted to line up just those vertically that were the wrong vertical size.
Using a <ul>/<li> structure, I kept float:left; and dispay:inline; and it was ok in FF and IE 7,8,9, but not correct in Chrome and Safari. For some reason, the last image went to the next line even though there was ample room for it.
After eliminating completely float: left; the vertical-align: middle; then worked. Then it was just adding padding to line them up horizontally. Works now in all browsers.
Not sure why there is a conflict between float:left; and vertical-align:middle;
You may want to play with eliminating your float:left;