So here's my HTML:
...
<div class="header">
<div class="left">
</div>
<div class="center">
<img class="logo" src="linktomyimage.com/image.png" />
</div>
<div class="right">
</div>
</div>
<!-- And the desired result is: -->
[ [LEFT] [CENTER] [RIGHT] ]
The only CSS I have is:
* {
margin: 0px;
}
img.logo {
display: block; margin-left: auto; margin-right: auto;
}
I really need help to align the three divs on the whole page. Also div.center must have the same size as the image, aka width - 800px and height - 600px.
It looks much more like a table than divisions to me...
<table class="header"><tr>
<td class="left"></td>
<td class="center">
<img class="logo" src="linktomyimage.com/image.png" />
</td>
<td class="right"></td>
</tr></table>
Think about so CSS afterwards :
table.header{
width: 100%;
border-collapse: collapse;
}
table.header td{
vertical-align: top;
border: 1px solid #404040;
}
table.header td.center{
width: 800px;
height: 600px;
}
This is just a code sample, get the idea, and adapt to your own needs ^^
Add these classes to your css
.left
{
display:inline-block;
width:25%;
}
.center
{
display:inline-block;
width:50%;
}
.right
{
display:inline-block;
width:25%;
}
With the following markup, 2 solutions come to mind:
MARKUP
<div class="header">
<div class="left">
Some left test
</div>
<div class="center">
<img class="logo" src="http://placehold.it/50x50" />
</div>
<div class="right">
Some right text
</div>
</div>
Solution #1
Float left and right sides and use display-block on the center
FIDDLE
Css
.header
{
text-align: center;
width:100%;
}
.left
{
float:left
}
.right
{
float:right;
}
.center
{
display:inline-block;
}
Solution #2
Use text-align: justify; on the header element.
Then stretch the content to take up 100% width
FIDDLE
CSS
.header
{
text-align: justify;
width:100%;
}
.header > div
{
display: inline-block;
}
.header:after {
content: '';
display: inline-block;
width: 100%;
}
.left, .centre, .right {
float:left;
}
What float:left does is, is it'll make each container organize itself from the left, so you get:
[LEFT]-[CENTRE]-[RIGHT]
Related
I have an image which is on the right and the text needs to be beside it on the left with the start of the text inline with the top of the image, how would I do this?
#pic0 {
width:100%;
}
#pic0img {
display: inline-block;
height: auto;
margin-left:50%;
width:100%;
margin-bottom:5px;
}
pic0txt {
margin-right:52%;
width:48%;
}
<div id="pic0">
<div id="pic0img">
<img src="Images/Activities/pic0.fw.png" width="50%"
onmouseover="this.src='Images/Activities/pic0.fw.png'"
onmouseout="this.src='Images/Activities/pic0.fw.png'" />
</div>
<div id="pic0txt">
<p>test</p>
</div>
</div>
See this simplified snippet (remove borders which are just for test):
#pic0txt {
display: inline-block; border:1px solid red;
text-align:center;
vertical-align:top;
width:48%;
}
#pic0img {
display: inline-block; border:1px solid red;
width:48%;
}
<div>
<div id="pic0txt">test</div>
<img id="pic0img" src="https://www-asp.azureedge.net/v-2016-11-01-012/images/ui/home-free-courses.png" />
</div>
<hr/>
<div>
<img id="pic0img" src="https://www-asp.azureedge.net/v-2016-11-01-012/images/ui/home-free-courses.png" />
<div id="pic0txt">test</div>
</div>
Use flex on the parent, then flex-grow on each flex item so they'll be 50% width, and set the image to width: 100% so it fills it's parent.
.flex {
display: flex;
}
.flex > div {
flex-grow: 1;
flex-basis: 0;
}
img {
width: 100%;
}
<div class="flex">
<div>
<p>text</p>
</div>
<div>
<img src="http://www.w3schools.com/css/paris.jpg">
</div>
</div>
Try this simple and easy trick:
<div id="pic0">
<div id="pic0img">
<p> <img src="http://images5.fanpop.com/image/photos/31300000/beautiful-heart-pic-beautiful-pictures-31395948-333-500.jpg" width="50%"
onmouseover="this.src='Images/Activities/pic0.fw.png'"
onmouseout="this.src='Images/Activities/pic0.fw.png'" />test</p>
</div>
</div>
#pic0 {
width:20%;
}
#pic0img {
display: inline-block;
height: auto;
margin-left:50%;
width:100%;
margin-bottom:5px;
}
I'm trying to make the first div child below use up 100% of the available space minus 20px and then use the second div child to use 20px and be on the same line as the first child div.
<div style="width: 10%;">
<div style="float: left; margin-right: 20px;">Left side, should use up all space except margin!</div>
<div style="float: left; margin-left: -20px; width: 20px;">Should only use 20px no matter what.</div>
</div>
This should be able to be done with CSS level one (that means no position lame-outs) though I know I'm missing something. Also there will be anchors in both div elements that must use 100% of the available width so there is a trick here to get the float to behave a certain way...
Solution #1
Make use of overflow: hidden (or overflow: auto) to fill the remaining horizontal space.
(NB: For this to work you need to place the element on the right hand side first in your markup)
FIDDLE
<div>
<div class="div2">DIV 2</div>
<div class="div1">DIV 1</div>
</div>
CSS
.div1 {
background:yellow;
overflow: hidden;
}
.div2 {
background:brown;
float:right;
width: 50px;
}
Solution #2
You can do this with box-sizing: border-box
FIDDLE
<div>
<div class="div1">DIV 1</div>
<div class="div2">DIV 2</div>
</div>
CSS
.div1 {
background:yellow;
float:left;
padding-right: 50px;
margin-right: -50px;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
}
.div2 {
background:brown;
float:left;
width: 50px;
}
Solution #3
Use css tables:
FIDDLE
<div class="container">
<div class="div1">DIV 1</div>
<div class="div2">DIV 2</div>
</div>
.container
{
display:table;
}
.div1 {
background:yellow;
display: table-cell;
width: 100%;
}
.div2 {
background:brown;
width: 50px;
display: table-cell;
word-break: break-word;
min-width: 50px;
}
Solution #4 (CSS3 required)
use calc
FIDDLE
On the first child set width: calc(100% - 50px)
On the second div set width: 50px;
.div1 {
background:yellow;
width: calc(100% - 50px);
float: left;
}
.div2 {
background:brown;
width: 50px;
float: left;
}
Can you change the HTML structure a bit?
<div style="width: 10%;">
<div style="display: block; width: 100%;">
<div style="width: 20px; float: right;"></div>
</div>
</div>
Here's another approach using display:table.
<html>
<style>
body { padding:0; margin:0; display:table; width:100%; }
#content { display:table-row; }
#b1, #b2 { display:table-cell; }
#b1 { background-color:#eee; padding:2em; }
#b2 { width:20px; background-color:#bbb; }
</style>
</head>
<body>
<div id="content">
<div id="b1">
<h1>Main content here</h1>
<p>Side bar on right is 20 px wide.</p>
</div>
<div id="b2">
</div>
</div>
</body>
</html>
I need to display one paragraph aligned to the left, another paragraph aligned to the right, and a centered image, all on the same line on the footer of a webpage.
How do I achieve that? My current code gets the second paragraph on a new line.
HTML
<div id="footer">
<p class="alignleft">Text</p>
<img id="logo" src="#">
<p class="alignright">More text</p>
</div>
CSS
.alignleft {
float: left;
}
.alignright {
float: right;
}
#logo {
display: block;
margin-left: auto;
margin-right: auto;
}
Hope this helps for you:
<div id="footer">
<span>Text</span>
<span><img src="http://www.klm.com/jobs/nl/images/icon_flight_32x32_tcm701-312701.gif" /></span>
<span>More text</span>
</div>
#footer {
width: 100%;
display: table;
table-layout: fixed;
background: gray;
}
#footer span {
display: table-cell;
}
#footer span:nth-child(2) { text-align: center; }
#footer span:last-child { text-align: right; }
JSFiddle DEMO
Here's what I ended up doing:
Enclosing the texts and images on DIVs,
Explicitly setting the width percentage of these DIVs to 33.333% (1/3rd) each,
Left-Floating these DIVs,
Using text-align to align the elements inside those DIVs.
No need to change the order of my HTML, and works with as many elements as needed, just changing the percentage value! :)
Code
HTML
<footer>
<div id="footerleft"><p>Text</p></div>
<div id="footercenter"><img src="./img/logo.jpg" alt="Logo"></div>
<div id="footerright"><p>More Text</p></div>
</footer>
CSS
#footerleft {
float: left;
width:33.333%;
text-align:left;
}
#footercenter {
float: left;
width: 33.333%;
text-align: center;
}
#footerright {
float: left;
width:33.333%;
text-align:right;
}
You need to rearrange your HTML:
<div id="footer">
<p class="alignleft">Text</p>
<p class="alignright">More text</p>
<img id="logo" src="#" />
</div>
DEMO
My aim is to place 3 images in one row with the same distance from each other, as it is shown in the picture below (assuming the 2 arrows have the same length).
By now my solution is a very ugly one, which breaks, if the window size is too small:
<h1>
<div style="width:105px; height:30px; float:left; margin-top:25px;">
<img src="image1.png"/>
</div>
<div style="width:190px; height:30px; float:left; margin-top:25px; margin-left:30%; margin-right:30%;">
<img src="image2.png"/>
</div>
<div style="width:102px; height:30px; float:right; margin-top:25px;">
<img src="image3.png"/>
</div>
<div style="clear: both;">
</div>
</h1>
I would really prefer a "clean" solution, but my HTML knowledge about positioning is too limited so far.
Any help would be appreciated.
Use text-align: justify:
<div class="outer">
<img src="http://placehold.it/50x100" />
<img src="http://placehold.it/150x100" />
<img src="http://placehold.it/50x100" />
<span class="fix"></span>
</div>
.outer {
text-align: justify;
}
.outer img {
display: inline-block;
vertical-align: center;
}
.outer .fix {
width: 100%;
height: 0;
display: inline-block;
}
In most browsers, you can remove that .fix span, and add:
.outer::after {
width: 100%;
height: 0;
display: inline-block;
content: "";
}
I'm trying to create the following layout for my website:
<table width="80%" align="center">
<tr>
<td width="80%" bgcolor="red">MAIN CONTENT</td>
<td bgcolor="green">SIDEBAR</td>
</tr>
</table>
As you would imagine this will create a table that is 80% of the page width and the content area is 80% of that width, while the sidebar fills the rest.
But this time I want to use DIVs or SPANs or basically a TABLEless design. Now, I know I can use two DIVs and use their "float" properties to achieve this but I was hoping to see if there is something more simple and more logical like this:
<div align="center" style="width:80%">
<span style="width:80%;">
MAIN CONTENT
</span>
<span>
SIDEBAR
</span>
</div>
Unfortunately the above does not work at all and I don't know why. Can someone please show me the purest HTML implementation for it which does not use "float"?
Every site I see on the internet nowadays has at least one sidebar so I'm hoping your answer to this will help a lot of people besides me. Thanks!
You can do this without using floats by using proper markup and display: table;, display: table-cell; with CSS.
HTML:
<div id="wrap">
<div id="sidebar">
I am a sidebar!
</div>
<div id="mainContent">
I am some main content
</div>
</div>
CSS:
#wrap
{
width: 100%;
height: 400px;
display: table;
}
#sidebar
{
display: table-cell;
border: 1px dashed #f00;
}
#mainContent
{
display: table-cell;
width: 80%;
border: 1px dashed #0f0;
}
But beware, IE7 and lower do not support this CSS.
http://jsfiddle.net/57Fvk/
Using almost the same markup (one extra div) you can use floats to create the desired layout also:
HTML
<div id="wrap">
<div id="sidebar">
I am a sidebar!
</div>
<div id="mainContent">
I am some main content
</div>
<div class="clear"> </div>
</div>
CSS:
#wrap
{
width: 100%;
height: 400px;
}
#sidebar
{
width: 20%;
float: left;
background: #f00;
height: 100%;
}
#mainContent
{
width: 80%;
float: left;
background: #0f0;
height: 100%;
}
.clear
{
clear: both;
}
http://jsfiddle.net/shzLc/
Here's a very simple way to create this layout:
http://jsfiddle.net/e94zc/
HTML:
<div id="page">
<div id="content">
Content
</div>
<div id="sidebar">
Sidebar
</div>
</div>
CSS:
#page{
margin: 0 auto;
width:80%;
position: relative;
}
#content{
width:80%;
position: absolute;
top: 0;
}
#sidebar{
position: absolute;
top: 0;
left: 80%;
width: 20%;
}