I am making a footer with three elements, an h3 and two divs, all elements are floated to the right with a margin percentage.
Problem is the third element(div2) goes bellow the first div instead of floating to the left.
Here is my code, I am aware inline styling is not good idea.
<div class="container" style="width:100%; height:70px; position:relative; float:left; padding:2%;">
<h3 style="float:left; position:relative; margin-right:15%; top:50%; transform:translateY(-50%); ">Contact our experts</h3>
<div class="telcontainer" style="margin-right:15%; width:auto; height:32px; position:relative; top:50%; transform:translateY(-50%); overflow:hidden; ">
<img src="https://images.petsmartassets.com/is/image/PetSmart/icon-experts-call?$GN1201$" style="width:32px; height:32px; position:relative; float:left;">
<h3 style="position:relative; float:left; margin-left:1%;">694003903</h3>
</div>
<div class="mailcontainer" style=" width:auto; height:32px; position:relative; top:50%; transform:translateY(-50%); overflow:hidden; ">
<img src="https://images.petsmartassets.com/is/image/PetSmart/icon-experts-call?$GN1201$" style="width:32px; height:32px; position:relative; float:left;">
<h3 style="position:relative; float:left; margin-left:1%;">Mail Us</h3>
</div>
</div>
If you want to align items in a row or column, try using display: flex. It will save a lot of hassle
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
<div class="container" style="width:100%; padding:2%; display: flex; align-items: center; flex-direction: column">
<h3 style="float:left;">Contact our experts</h3>
<div class="telcontainer" style="width:auto; position:relative; display: flex">
<img src="https://images.petsmartassets.com/is/image/PetSmart/icon-experts-call?$GN1201$" style="width:32px; height:32px; position:relative; float:left;">
<h3>694003903</h3>
</div>
<div class="mailcontainer" style=" width:auto; position:relative; display: flex">
<img src="https://images.petsmartassets.com/is/image/PetSmart/icon-experts-call?$GN1201$" style="width:32px; height:32px; position:relative;">
<h3>Mail Us</h3>
</div>
</div>
You have position:reltive instead of position:relative. Does this change anything if you correct it?
Related
I want to have a header with an image them two texts and the document is right to left.
I'm implementing a 12 column division using inline-block display and percent widths and the three objects I've mentioned above are placed in a 2 5 5 spacing(code included).
here's the problem:
they are arranged in a stair-like pattern rather than being inline. Each of the divs falls a little below the previous one(which is on its right since the document is rtl)
I'll include the code below
can someone tell me what I'm doing wrong?
<html dir="rtl" xmlns="http://www.w3.org/1999/html">
<head>
<style>
body{
margin:0px;
}
header{
position:fixed;
top:0px;
left:0;
width:100%;
height:5%;
}
.container-fluid{
position:relative;
height:100%;
}
.col-5{
position:relative;
display:inline-block;
height:100%;
margin-right:6px;
top:0;
width:40%;
}
.col-2{
position:relative;
display:inline-block;
height:100%;
width:16%;
}
.img-cont{
position:relative;
height:100%;
margin-right:auto;
display:inline-block;
}
</style>
</head>
<body>
<header>
<div class="container-fluid">
<div class="col-2">
<div class="img-cont">
<img height="100%" src="circle.png"/>
</div>
</div>
<div class="col-5">
<span style="display:inline-block; font-size:30px; "> سلام </span>
</div>
<div class="col-5">
<span>hello</span>
</div>
</div>
</header>
</body>
</html>
here's a preview
You can just use display:flex; and arrange then with align-content:center; and justify-content:center;. That will align the divs.
<html dir="rtl" xmlns="http://www.w3.org/1999/html">
<head>
<style>
body{
margin:0px;
}
header{
position:fixed;
top:0px;
left:0;
width:100%;
height:5%;
}
.container-fluid{
position:relative;
height:100%;
display:flex;
align-content:center;
justify-content:center;
}
.col-5{
height:100%;
margin-right:6px;
width:40%;
}
.col-2{
height:100%;
width:16%;
}
.img-cont{
height:100%;
margin-right:auto;
}
</style>
</head>
<body>
<header>
<div class="container-fluid">
<div class="col-2">
<div class="img-cont">
<img height="100%" src="circle.png"/>
</div>
</div>
<div class="col-5">
<span style="font-size:30px; "> سلام </span>
</div>
<div class="col-5">
<span>hello</span>
</div>
</div>
</header>
</body>
</html>
How can I put a div with text, logo or any more stuff on the center of this banner, like the example?
<div class="banner">
<img src="img/banner2.jpg" width="100%" alt="Nasajon Sistemas">
</div>
Example :
My Page
Here there is an example you can fit to your needs:
.center{
text-align:center;
width:200px;
height:100px;
background-color:red;
position:absolute;
top: 50%;
left:50%;
margin-left:-100px;
margin-top:-50px;
}
.outter{
width:100%;
height: 500px;;
background-color:black;
}
<div class="outter">
<div class="center">
<h1>Mywebsite</h1>
</div>
</div>
https://jsfiddle.net/alexcuria/uunwbqyb/
how do i make divs display at the bottom of the screen inline (following each other horizontally like facebook chat) and also overlapping their parent div. i have tried the following but does not work.
<div id="container">
<div id="box">
</div>
<div id="box">
</div>
<div id="box">
</div>
</div>
#container{
height:10px;
position:fixed;
bottom:0;
width:1000px;
margin:0 auto;
}
#box{
border:1px solid blue;
width:250px;
height:300px;
display:inline-table;
position:fixed;
bottom:0;
}
Wrap the elements in another container div, which is positioned absolutely.
Firstly, you can't use duplicate id's. Use classes instead.
Your HTML will be something like:
<div id="container">
<div class="box-container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
You can't use display:inline-table and fixed together. Use position:absolute or position:fixed (if you want to make the items stick) for the container div, and for instance display:inline-block for the .box elements to get them inline.
#container {
height:10px;
position:fixed;
bottom:0;
width:1000px;
margin:0 auto;
}
.box-container {
position:absolute;
bottom:0;
height:40px;
width:100%;
}
.box{
border:1px solid blue;
width:250px;
height:40px;
display:inline-block;
}
See http://jsfiddle.net/B228U/1/ for an example.
Cheers,
Jeroen
You can´t give same id to different elements. Use class. Also give main div position:relative and float:left to rhe class box. Like this:
<div id="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
#container{
height:10px;
position:absolute;
bottom:0;
width:1000px;
margin:0 auto;
}
.box{
border:1px solid blue;
width:250px;
height:300px;
float:left;
display:inline-table;
position:relative;
bottom:0;
}
http://jsfiddle.net/7kwLc/
I am trying to place Image and Text next to another Image. If you want to see what I mean, look here:
I tried using floats and stuff, but It doesn't seem to work. Here is my code:
.left {float: left;}
.right{float: right;}
<div class="left">
<img src="img/image1.png" />
<p>Text</p>
</div>
<div class="right">
<img src="img/image2.png" />
</div>
Is this what you want?
<body>
<div id="Menu">
<img src="image"/>
<h4>Text</h4>
</div>
<div id="Container">
<h4>Content Section</h4>
</div>
body, html {
width:100%;
height:100%;
margin:0;
color:white;
}
#Menu {
background-color:black;
height:50%;
width:25%;
position:relative;
top:70px;
float:left;
}
#Container {
height:50%;
width:70%;
background-color:blue;
position:relative;
top:70px;
float:right;
}
Here you go,
.container {
width:100%;
height:500px;
}
.left, .right{
position:relative;
height:100%;
width:50%;
float:left;
}
.img1{
width:100%;
height:50px;
}
<div class='container'>
<div class="left">
<img src="http://www.ancestry.com/wiki/images/archive/a/a9/20100708215937!Example.jpg" alt="img 1" class='img1'/>
<p>asdf asfd asdf asdf</p>
</div>
<div class="right">
<img src="http://www.ancestry.com/wiki/images/archive/a/a9/20100708215937!Example.jpg" alt="img 1" />
</div>
</div>
http://jsfiddle.net/qCGuL/
I have an image with three lines of text to the right. The text is centering on the remaining space on the line, but I would like to center it on the page so that all of the text is centered (the text below the image looks good). Is this possible?
<div style="position:relative">
<img src="RGB2748.jpg" style="float:left;" width="70" />
</div>
<div style=" height:10px; font-size:22px; text-align:center;">Text</div>
<div style="height:10px; font-size:20px; text-align:center;">Text</div>
<div style="height:10px; font-size:16px; text-align:center;">Text</div>
...
...
More text
Thanks
what do you mean by 'center'? vertically? so use e.g. 'line-height:100px' and 'vertical-align: middle'.
the position:relative doesn't make sense in this context. use float:left to position e.g. two divs side by side (beginning on the left side) and clear:both (as said), to continue positioning divs under these two.
edit:
one solution:
<div style="height:50px; font-size:22px; text-align:center; position:relative; width: 100%;">
<img src="RGB2748.jpg" style="position:absolute; top:0; left:0; width: 70px" />
Text
</div>
<div style="height:50px; font-size:20px; text-align:center; width: 100%;">Text</div>
<div style="height:50px; font-size:16px; text-align:center; width: 100%;">Text</div>
pro: text is centered to page
contra: if text is too wide it would be hidden in parts under the img
modified first solution (if you better like it this way):
<div style="height:50px; font-size:22px; text-align:center; position:relative; width: 100%;">
<img src="RGB2748.jpg" style="position:absolute; top:0; left:0; width: 70px" />
<div style="height:50px; font-size:22px; text-align:center; width: 100%;">Text</div>
<div style="height:50px; font-size:20px; text-align:center; width: 100%;">Text</div>
<div style="height:50px; font-size:16px; text-align:center; width: 100%;">Text</div>
</div>
another solution:
<div style="background: lightblue; width: 10%; float:left;">
<img src="RGB2748.jpg" style="float: left; width: 70px;" />
</div>
<div style="background: lightgray; width: 90%; float:left;">
<div style="line-height:50px; font-size:22px; text-align:center; width: 100%;">Text</div>
<div style="line-height:100px; font-size:20px; text-align:center; width: 100%;">Text</div>
<div style="line-height:10px; font-size:16px; text-align:center; width: 100%;">Text</div>
</div>
<div style="clear:both;">following text</div>
pro: text will be displayed not matter how long it is
contra: text isn't centered to the page, but only to the surrounding div
Add clear:both to the style of the first text block/div.