I am trying to make it so two uneven columns are close together, but I'm not sure where I went wrong while I was writing the code.
When these are entered, the columns span the width of the page, where I would like this to be about 720px total, with the main column being 520px and the secondary column being 200px.
I've tried about 30 different things, changing nearly all the variables, and adding random "align=/:center"'s around all the divs.
I'm not quite sure, and I could really use some help.
I've been working on this the last 5 hours of work, and this needs to be done, I cant quite get it :(
Thank you so much!
<style>
.table { border:0px solid black; padding:10px; max-width:723px; overflow:hidden; }
.left { float:left; width:75%; }
.right { float:right; width:25%; }
</style>
</head>
<body bgcolor="#ffffff">
<center>
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="723">
<tr>
<td colspan="3"><img name="gala_r1_c1" src="/images/gala_r1_c1.jpg" width="720" height="42" border="0" alt=""></td>
</tr>
<tr>
<td colspan="3"><img name="gala_r2_c1" src="/images/gala_r2_c1.jpg" width="720" height="283" border="0" alt=""></td>
</tr>
</table>
</center>
<div class="table">
<div class="left">
<h1>From the President</h1>
<p></p>
<p>Dear Friends,</p>
blah
</div>
<div class="right">
<h1>From Students</h1>
-"<b>derp"<br>
</b>
</div>
</div>
</center>
{embed="embeds/global_footer"}
</body>
</html>
left .table { border:0px solid black;
padding:10px;
max-width:723px;
overflow:hidden;
margin:0 auto; }
So, add margin:0 auto; to the table class.
Update:
<style type="text/css">
<style>
Remove one of them... :)
Instead this:
<div class="right"> <div class="right" padding-right="100px"> <h1>From Students</h1> -"<b>derp</b> </div> </div>
try with this:
<div class="right"> <div style='padding-left:15px'> <h1>From Students</h1> -"<b>derp</b> ....</div> </div>
There are 3 changes you will need to make:
1) MOST IMPORTANT - you need a doctype! Otherwise this pushes the browser into quirks mode and into otherwise no man's land. Always include this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
2) Remove the dangling </center> tag at the bottom.
3) Add margin: 0 auto; as the gentleman before me posted. This the css equivalent to the html <center> tag.
Final results:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Float center</title>
<style>
.table { border:0px solid black; padding:10px; max-width:723px; overflow:hidden; margin: 0 auto;}
.left { float:left; width:75%; }
.right { float:right; width:25%; }
</style>
</head>
<body bgcolor="#ffffff">
<center>
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="723">
<tr>
<td colspan="3"><img name="gala_r1_c1" src="/images/gala_r1_c1.jpg" width="720" height="42" border="0"
alt=""></td>
</tr>
<tr>
<td colspan="3"><img name="gala_r2_c1" src="/images/gala_r2_c1.jpg" width="720" height="283" border="0"
alt=""></td>
</tr>
</table>
</center>
<div class="table">
<div class="left">
<h1>From the President</h1>
<p></p>
<p>Dear Friends,</p>
blah
</div>
<div class="right">
<h1>From Students</h1>
-"<b>derp"<br>
</b>
</div>
</div>
{embed="embeds/global_footer"}
</body>
</html>
Snapshot:
Related
I have an HTML email. I want 3 images side by side on a large screen with more then 900px width, like this:
On a mobile phone I would like to have the boxed below each other like this:
I want to achieve this in Gmail app and webbrowser. Unfortunately, I cant use media queries because they are not supported in Gmail app (and in my experience they also didn't work for Gmail web browser): https://www.campaignmonitor.com/css/media-queries/media/
How can I do this? My basic Idea was to use a table like this:
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td align="center">
<table class="my-table-size" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td align="center">
<img style="display: inline-block" src="http://www.my.dev/box.jpg" alt="logo" height="90" >
<img style="display: inline-block" src="http://www.my.dev/box.jpg" alt="logo" height="90" class="middleimage">
<img style="display: inline-block" src="http://www.my.dev/box.jpg" alt="logo" height="90" >
</td>
</tr>
</table>
</td>
</tr>
</table>
But it seems that the "inline-block" style is ignored, because the images are always below each other as in - even if there would be enough space to put them side by side.
I can give the table a fix width like
<table class="my-table-size" width="900px" >
but then it will always have width 900px also on mobile. So it will look on any device like this:
How can I get this to work?
What you're looking for is commonly solved by use of the "fluid hybrid" technique. I'm going to steal from https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919 for this, but it's a very common technique (there are others around too).
The essential code is below:
<div class="three-col" style="font-size:0;text-align:center;">
<!--[if mso]>
<table role="presentation" width="100%" style="text-align:center;">
<tr>
<td style="width:220px;padding:10px;" valign="top">
<![endif]-->
<div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
<div style="padding:10px;font-size:14px;line-height:18px;">
[content goes here]
</div>
</div>
<!--[if mso]>
</td>
<td style="width:220px;padding:10px;" valign="top">
<![endif]-->
<div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
<div style="padding:10px;font-size:14px;line-height:18px;">
[content goes here]
</div>
</div>
<!--[if mso]>
</td>
<td style="width:220px;padding:10px;" valign="top">
<![endif]-->
<div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
<div style="padding:10px;font-size:14px;line-height:18px;">
[content goes here]
</div>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
Now, you can still use media queries to enhance the experience for those email clients that do support embedded <style>s.
So you can add this, as one possible example, in the <head>:
<style type="text/css">
#media screen and (max-width: 350px) {
.three-col .column {
max-width: 100% !important;
}
}
#media screen and (min-width: 351px) and (max-width: 460px) {
.three-col .column {
max-width: 50% !important;
}
}
#media screen and (min-width: 461px) {
.three-col .column {
max-width: 33.3% !important;
}
.two-col .column {
max-width: 50% !important;
}
.sidebar .small {
max-width: 16% !important;
}
.sidebar .large {
max-width: 84% !important;
}
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="col-sm-3">
<div class="panel panel-default">
<div class="panel-body" style="height:350px; background-color:#fff; border-color:#66cfff; border-style:solid; border-width:1px;padding:0px; overflow:auto;">
<div style="background-color: #0096db!important; padding: 10px 10px 30px 10px; align-items:stretch;">
<div style="float:left; vertical-align:middle">
<h2 style="color: #ffffff !important; text-align: left; font-size: 16px;font-family:Helvetica; font-weight: bold;">Last Payment</h2>
</div>
<div style="float:right ; vertical-align:middle">
<h5>
<a style="cursor:pointer; font-size:13px; color:#ffffff !important; font-weight:bold;" [routerLink]="['/historicPayments']">
View All
</a>
</h5>
</div>
</div>
<table class='table' style="margin-top:10px;">
<thead class="box-heading">
<tr class="row-style">
<th width="16%" style="vertical-align:top">Property/ Agreement ID</th>
<th width="20%" style="vertical-align:top">Property/ Agreement Name</th>
<th width="12%" style="vertical-align:top">Project ID</th>
<th width="20%" style="vertical-align:top">Project Name</th>
<th width="12%" style="vertical-align:top">Check Date</th>
<th width="12%" style="vertical-align:top">Check Amount</th>
<th width="8%" style="vertical-align:top">Invoice</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</body>
</html>
How to stretch the div tag to be equal to table's width. Please see the screenshot. Currently there is white space showing at the end
Please check the updated code. I see it showing the white space at the end of header lable when we move the horizontal bar. Please test this code on w3c school site.
Give percentage value for width attribute.
.example { width:50%; background:green;}<div class="example">HAVE FUN!</div>
Try using width:100%; display:block;
This will help you to make your div 100%
Apply your div with display:table; css.
For example your div class is .box1 then css will be:
div.box1 {width:100%; display:table;}
I assume table width is 100% too.
I need help with HTML / .css
I am trying to setup Image and Text in the center of Web Form Page. Also Image should be on the left of Text.
I've tried 2 solutions, but when I create table - it display on the left of screen and can't go middle.
A
<section class="main-page">
<div class="image-wrapper">
<asp:Image ID="Image2" Height="35px" runat="server" ImageUrl="~/Images/Origin/logo.jpg" />
</div>
<div class="content-wrapper">
<hgroup class="title">
<h1><%: Title %></h1>
</hgroup>
</div>
</section>
B
<table>
<tbody>
<tr>
<th><h1><%: Title %></h1></th>
<th><asp:Image ID="Image2" Height="35px" runat="server" ImageUrl="~/Images/Origin/logo.jpg" /></th>
</tr>
</tbody>
</table>
.css
.content-wrapper {
margin: 0 auto;
/*max-width: 960px;*/
}
You need to place the image/text in a container with text-align:center; defined in order for them to be centred, then the text should simply precede the image.
If for whatever reason the img element cant be placed following the text, you may need to float the elements to rearrange their ordering.
If the text is within a block level element, you will also need to set display:inline-block on it
As a basic demo:
HTML
<section>Text
<img src='https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRdw26b_dwa8moS-gRSFpaG3dwJTB6Nqtqxexmb7PscuD5gVP-P' />
</section>
CSS
section {
text-align:center;
vertical-align:Center;
}
Demo Fiddle of example A
HTML
<section class="main-page">
<div class="image-wrapper">
<img src='https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRdw26b_dwa8moS-gRSFpaG3dwJTB6Nqtqxexmb7PscuD5gVP-P' />
</div>
<div class="content-wrapper">
<hgroup class="title">
<h1>Title</h1>
</hgroup>
</div>
</section>
CSS
body{
text-align:center;
}
div, section{
display:inline-block;
}
div:first-child{
float:right;
}
div:last-child{
float:left;
}
Demo Fiddle of example B
HTML
<table>
<tbody>
<tr>
<th><h1>Title</h1></th>
<th><img src='https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRdw26b_dwa8moS-gRSFpaG3dwJTB6Nqtqxexmb7PscuD5gVP-P' /></th>
</tr>
</tbody>
</table>
CSS
body{
text-align:center;
}
table{
display:inline-block;
}
I can't make HTML layout described as in jsFiddle link below, using <div> and CSS float. With table tag I can solve this problem, but I need DIV+CSS solution. It's possible? Anyone can help?
HTML:
<div class="container">
<div class="column">
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
</div>
<div>
Something on top
</div>
<div id="bottom-content" style="background-color: #FA0">
Something with vertical align = bottom AND height == height of left column
</div>
</div>
CSS:
.container {
overflow: hidden;
}
.column {
float: left;
background-color: grey;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
Live demo: jsFiddle
Solution:
HTML:
<div class="container">
<div class="column">
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
</div>
<div style="float:left; height:82px">
Something on top
</div>
<div id="bottom-content" style="background-color: #FA0; float:left;">
Something with vertical align = bottom AND height == height of left column
</div>
</div>
CSS:
.container {
overflow: hidden;
}
.column {
float: left;
background-color: grey;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
The layout(i.e. https://dl.dropbox.com/u/2325784/example_layout.png) can be achieved with the following code I guess:
.container {
width:900px;
overflow: hidden;
}
.picture{
float:left;
width:220px;
}
.column {
width:320px;
float: left;
background-color: grey;
}
& the HTML is:
<div class="container">
<div class="picture">Picture</div>
<div class="column">
<table>
<tr>
<td>Genere</td>
<td>Arcade</td>
</tr>
<tr>
<td>Developer</td>
<td>Micheal A. Denio</td>
</tr>
<tr>
<td>Publisher</td>
<td>Micheal A. Denio</td>
</tr>
<tr>
<td>Released</td>
<td>1988</td>
</tr>
<tr>
<td>Platform</td>
<td>DOS</td>
</tr>
<tr>
<td>Rating 1</td>
<td>Rating Picture will goes here</td>
</tr>
<tr>
<td>Rating 2</td>
<td>Rating2 Pic will goes here</td>
</tr>
</table>
</div>
</div>
If you do not want to use table you can achieve this with ul & li combination.
Cheers!
as i m getting your question.You need to give float on your div
jsfiddle.net/tKnw9/12
check the fiddle
Okay so I've been trying to position these 4 divs for about 6 hours now. The routes box is suppose to take up whatever height is left between the navigation and info divs, wasn't quite sure how to say that. If someone could help me out or point me in the right direction I would really appreciate it.
http://i.stack.imgur.com/41q3H.png
current code is at 98.214.131.200/new.php & 98.214.131.200/defualt.css
<div>
<div style="background-Color:black;height:35px"></div>
<div style="width:30%;float:left;height:500px">
<div style="height:50%;background-color:green;width:100%"></div>
<div style="height:50%;background-color:blue;width:100%"></div>
</div>
<div style="width:70%;float:right;height:500px;background-color:red"></div>
</div>
set the height:350px; of class .routes it may help you.
As Below:
.routes {
background: none repeat scroll 0 0 #0000FF;
height: 350px;
width: 300px;
}
JSFIDDLE:http://jsfiddle.net/beABW/
<div class="navigation"></div>
<div class="content">
<div class="firstCol">
<div class="routes"></div>
<div class="info"></div>
</div>
<div class="secondCol">
<div class="google_map"></div>
</div>
</div>
In your style.css
.navigation{
height:35px;
width:100%;
}
.content{
width:100%;
}
.firstCol{
float:left;
width:300px;
height:auto;
}
.routes{
width:300px
height:auto;
}
.info{
width:300px
height:200px;
}
.secondCol{
float:left;
width:auto;
height:auto;
}
.google_map{
width:auto;
height:auto;
}
Assuming you do not know the height initially you will need to do this programmatically by getting the height of Google Map minus the height of info and then setting routes to that height. Example here. Or you can use a table :-(
.class1
{
float:left;
}
#one
{
height:35px;
width:100%;
border:1px solid red;
}
#two
{
height:200px;
width:300px;
border:1px solid red;
}
#three {
border: 1px solid Green;
height: 403px;
}
#four
{
height:200px;
width:300px;
border:1px solid red;
}
#lftpanel {
float: left;
width: 300px;
}
#rgtpanel {
float: left;
width: 808px;
}
<div id="mainDIv">
<div id="one" class="class1">
</div>
<div id="lftpanel">
<div id="two" class="class1">
</div>
<div id="four" class="class1">
</div>
</div>
<div id="rgtpanel">
<div id="three" class="class1">
</div>
</div>
</div>
Here's an example for a table solution (not very W3C but the solution will work in older browsers, too) :
<table width="100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td colspan="2">Header
</td>
</tr>
<tr>
<td width="300px">
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td width="100%">topleft</td>
</tr>
<tr>
<td width="100%" height="200px">bottomleft</td>
</tr>
</table>
</td>
<td height="1000px">right</td>
</tr>
</table>
I tried this before, but doesn't work:
<table width="100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td colspan="2">Header
</td>
</tr>
<tr>
<td width="300px">topleft</td>
<td rowspan="2">right</td>
</tr>
<tr>
<td width="300px" height="200px">bottomleft</td>
</tr>
</table>
Using flex-boxes may be what you are after. Flex-boxes can be used to stretch/grow a div to fill it's parent while taking into account other children of it's parent. I have an example here of it doing what I believe your asking for.
Note: I'm not sure what browser versions this works in.
I edited khurram's answer, the trick is, float everything and to take up whatever space is left use overflow:hidden (no float!)
Edit:
http://jsfiddle.net/hashie5/v4jFr/