I'm trying to recreate an old text in HTML. At one point, the text does something kind of funny: it has two columns of text, and when one column reaches its end, the other column begins spanning the entire page.
Here is a mock example I've created in Paint:
Is there a way to do this with tables in HTML? Thanks.
Yes, it is. See: http://jsfiddle.net/minitech/jj7Bh/
It's a bit hard to see the effect with the narrow page size on jsFiddle, but that's how you do it - just set some CSS styles on paragraph #1.
No. You don't want tables, you want css float.
Example CSS:
.container {width:600px}
.inset {float:left; margin:0 20px 20px 0; width:300px}
.standard { }
Example structure:
<div class="container">
<div class="inset"></div>
<div class="standard"></div>
</div>
Fiddle
Floating the short paragraph left should do it:
<p id="short-paragraph">Lorem ipsum…</p>
<p id="long-paragraph">Vestibulum…</p>
With the CSS:
#short-paragraph { float: left; width: 40%; padding: 0 2em 2em 0; }
Don't do this with tables. Do it with a floated <p> with a specified width. Here is an example that I just validated in Safari:
<style type="text/css">
.box {
float: left;
width: 300px;
margin-left: 0px;
margin-right: 10px;
margin-top: 0px;
margin-bottom: 10px
}
</style>
<p class="box">
Box of text...
</p>
<p>
This text wraps around the bottom of the other text...
</p>
Related
This question already has answers here:
How to make a stable two column layout in HTML/CSS
(6 answers)
Closed 4 months ago.
I am currently using Jekyll, and I am attempting to create something that looks like this, where the code is on the right and the explanations are on the left.
The output from Jekyll's markdown processor will look something like this:
<p>Some explanation goes here</p>
<pre> // some code goes here </pre>
<p>Another example...</p>
<pre> // more example code goes here </pre>
So far, I have been able to achieve the two-column look by using float in CSS and making width: 50%;.
pre {
float: right;
width: 50%;
}
h1, h2, h3, h4, h5, h6, p, a {
float: left;
width: 50%;
margin-right: 50%;
}
However, this results in the <pre> tags being below the text I want, whereas I want the code to the right of the text.
What would be the best way to solve this problem using pure CSS?
Thanks!
Here is a simple demo.
HTML:
<div class="left">
<p>Some explanation goes here</p>
<p>Another example...</p>
</div>
<div class="right">
<pre> // some code goes here </pre>
<pre> // more example code goes here </pre>
</div>
CSS:
div.left {
float: left;
width: 50%;
}
div.right {
float: right;
width: 50%;
}
Two block elements have the width 50%, margin is also 50%, and that's 150%. Browser max. width is 100%, so you need to eliminate margin and any border around elements (border also have some width, no matter how small..) in order to make float works.
You may set width of the two block elements on, for example, 45 % (without any margin), and because they are floating right and left, you'll have the 10 % gap between them.
Ancor is not a block element, to make behave like such you'll need to write in css:
a {display: block}
'pre' element needs 'overflow' set to 'auto' or 'hidden'.
Move the pre tag above the left column in the HTML - floating elements to the right often means they need to appear before the left side items in the HTML. Also, wrapping both columns in a common div will allow you to clear any previous columns.
You can use the calc property for widths....
<div class="wrap">
<div class="rightcol">
<pre> //Code output </pre>
</div>
<div class="leftcol">
<h1>Some Text here</h1>
</div>
<div class="clear"></div>
</div>
You can loop the above HTML and use it as often as you want. It will use the same CSS and create 2 columns in every iteration.
.wrap {
clear: both;
padding: 10px;
margin: 20px;
border: 1px solid #000;
background: #fff;
}
.rightcol {
width: calc(50% - 22px);
background: #eee;
color: #333;
border: 1px solid #aaa;
float: right;
padding: 10px;
display: inline-block;
height: 200px; /*this is just for the fiddle*/
}
.leftcol {
width: calc(50% - 22px);
display: inline-block;
padding: 10px;
}
h1 { margin:0; padding:0;}
.clear { clear: both; }
Here's a jsFiddle Sample
Some minor CSS media queries for the left and ride side would allow this to be responsive.
Weave: http://kodeweave.sourceforge.net/editor/#f336823273b963b2c364bc34bd11a1d5
If you want resizable columns take a look into JqxSplitter. (requires JQuery)
html, body {
height: 100%;
}
body {
background: #dedede;
}
.content {
padding: 10px;
margin: 20px;
border: 1px solid #000;
background: #fff;
}
.desc, .code {
width: 43%;
}
.desc {
display: inline-block;
padding: 10px;
}
.code {
display: inline-block;
float: right;
background: #eee;
color: #333;
border: 1px solid #aaa;
height: 100%;
padding: 10px;
}
<div class="wrapper">
<div class="content">
<div class="desc">
<h3>Data Organization</h3>
Data on Quandl is organized into databases and datasets.
<p>A dataset is a single time series, with one or more columns. Column 0 of a dataset is always the date column. Columns 1 to n are data columns.</p>
<p>A database is a collection of datasets from a single publisher and/or on a single subject.</p>
<p>The Quandl API provides methods to access both dataset and database objects, provided you know their Quandl codes.</p>
</div>
<pre class="code">html, body {
height: 100%;
}
.lorem {
border: 1px solid #000;
}
.ispum {
float: left;
}
.door {
float: right;
}</pre>
</div>
<div class="content">
<div class="desc">
<h3>Quandl Codes</h3>
Every database on Quandl has a unique string identifier called the database_code.
<p>Every dataset on Quandl belongs to one and exactly one database. Every dataset thus has a database_code as well as a dataset_code associated with it. Both of these are required to uniquely identify the dataset.</p>
<p>The combination of database_code and dataset_code is called the Quandl code.</p>
</div>
<pre class="code">html, body {
height: 100%;
}
.lorem {
border: 1px solid #000;
}
.ispum {
float: left;
}
.door {
float: right;
}</pre>
</div>
</div>
This is very simple. Add float:left to paragraphs and code blocks. Use clear:left on p's. Make sure there is enough space for two elements next to each other. Add overflow:auto to the container. Like this: http://codepen.io/anon/pen/grqRPr. Add some padding if you want a 'gutter'.
I'd like to know how to get the following result:
Green is a container div 700 pixels wide. Blue is a title area which fills the green container width-wise with some title text centred in the middle. Red needs to float on the right without affecting the flow of the text in the title.
How do I achieve this? I've tried floating the red box on the right but it seems to push the text in the title to the left for some reason.
Edit - For the record, I hadn't posted an example because HTML and CSS isn't really my area of expertise and I'm struggling to get back to an example where the text didn't align (having tried half a dozen different methods I've been reading).
Here's roughly what I was trying: http://jsfiddle.net/3fgytw0u/
<!DOCTYPE html>
<head>
<title></title>
<style>
#Container {
width: 700px ;
margin-left: auto ;
margin-right: auto ;
}
#Title {
background-color: red;
text-align: center;
}
#GameGuidelines{
align:right;
width: 200px;
background-color: grey;
}
</style>
</head>
<body>
<div id="Container">
<div id="Title">
<h1>This</h1>
<h2>Is</h2>
<h2>A</h2>
<h2>Long</h2>
<h2>Title Title Title Title</h2>
</div>
<div id="GameGuidelines">
<ul>
<li>Some</li>
<li>Info</li>
<li>Here</li>
</ul>
</div>
<div id="Introduction">
<p>Rest of the page continues here</p>
</div>
</div>
</body>
</html>
Move the element up into the header, set it to position:absolute and give it a margin-left:500px;
http://jsfiddle.net/3fgytw0u/2/ <-- that one is right
Maybe it would help you: Link
#Container {
width: 700px ;
margin-left: auto ;
margin-right: auto ;
position: relative;
}
#Title {
background-color: red;
text-align: center;
}
#GameGuidelines{
text-align:right;
position: absolute;
right: 0;
top: 0;
width: 200px;
background-color: grey;
}
Alternative approach to positioning can be using negative margin-left equal to width of red area:
h2 {
padding: 10px;
background: #EEE;
text-align: center;
overflow: hidden;
}
h2 .right-block {
width: 50px;
height: 50px;
background: coral;
float: right;
margin-left: -50px;
}
<h2>
Some centered text
<div class="right-block"></div>
</h2>
Here is what you want.
<html>
<head></head>
<body>
<div style="border:green 1px solid;height:700px;" >
<div style="border:blue 1px solid;width:100%;height:200px;text-align:center">
Some Title Text
<div style="float:right;border:1px red solid;width:100px;height:100px;margin-right:5px;position:relative;">
Some text
</div>
</div>
</div>
</body>
</html>
Red div will float on the right inside the blue one.
That could be simply done by positioning the inner div as position: absolute and putting it right: 0px, but because you need to prevent that it does not start to be positioned with the main display instead, you put position: relative to the outer div too. Also make sure that while writing you put the red div first and then the div which has purple text, or you can just add top: 0px so that you don't care about that anymore.
Then it should work!
Here's a fiddle: http://jsfiddle.net/xg6rove7/
But be wary of the fact that any text in the red box can then overlap the text in the purple, as I have tried to show you in the fiddle. You might b better with using a padding for both sides equal to the box's width, or just use your plain old float: right
I have a div including three inner divs which are all floated left. This floats should represent three columns. So far, everthing's ok.
But if I add headlines inside each of the inner divs and the headlines are to wide, the headlines will overlap.
An image will show it better than 1000 words:
(Sorry for external link. But due to I am new here I have not enough reputation points to post images :) )
My html code looks like this:
<div id="content_container" class="appearance">
<div class="column">
<h1>My headline1111111111111</h1>
text
</div>
<div class="column">
<h1>My headline2222222222</h1>
text
</div>
<div class="column">
<h1>My headline333333333333333333333</h1>
text
</div>
<div style="clear: left;"></div>
</div>
And here is my css code:
#content_container {
position: relative;
}
.column {
float: left;
width: 33.33333%;
padding-right: 10px;
}
.appearance {
margin: 0 auto;
width: 60%;
}
The content_container on the other hand is also an inner div of another wrapper container. Don't know whether it matter in this case.
Any ideas what I could do, to fix it?
I think word-break, with which you can specify if you want to break line within a word, will do the trick:
.column { word-break:break-all; }
jsFiddle demo.
You can read more about the word-break property here.
You can use
.column { overflow: hidden; }
to truncate the header or
.column { overflow-x: scroll; }
to make it scrollable.
I can't get the text in the footer placed in the right position, just as the image below:
I've been making changes to the code from a template and now the text is in the upper part and some blank spots appear, specially on Chrome browsers:
The web is here and these are the links to the html and the css
Update: JSFiddle added.
<footer class="aligncenter">
<div class="wrapper" id="bottom_footer">
<h2 class="hidden">xxxx Footer</h2>
<section>
<div class="left_column">
<h4>OFICINAS CENTRALES</h4>
<p>xxxxxxx xxxx, 35</p>
<P>xxxx x</p>
<p>Tlfo xxxxx Fax xxxx</p>
</div>
<!-- left_column-->
<div class="mid_column"><span class="helper"></span>
<img src="images/eccWhite_200.png" width="400" height="120" />
</div>
<div class="right_column">
<h4> xxxxx ESTRUCTURAS SL</h4>
<p>estructuras construcciones y contratas</p>
<p>info#xxxx</p>
</div>
<!--right_column-->
</section>
<!-- class="container"-->
</div>
<!-- wrapper footer-->
</footer>
Could you please show me what I'm doing wrong?
I would recommend against using float:left; on the left and middle column. Since your content is not likely to change significantly there is one thing I might do. Give your footer position:relative and position your .right-column with position:absolute; bottom:0; right:0;. This will ensure that your right column is far to the right, and aligned to the bottom of the footer.
Overall, the styles in the footer seem like they are trying to be 'not a table' and end up being kind of messy for it. If you want semantic markup that still behaves like a table, try http://960.gs/.
<footer id="footer">
<h2 class="hidden">Ecomir Footer</h2>
<div class="left_column">
<h4>OFICINAS CENTRALES</h4>
<span>Almirantes Matos, 35</span>
<span>36002 PONTEVEDRA</span>
<span>Tlfo 986869940 Fax 98685362<span>
</div><!-- left_column-->
<div class="right_column">
<h4> ECOMIR ESTRUCTURAS SL</h4>
<span>estructuras construcciones y contratas</span>
<span>info#ecomir.es</span>
</div><!--right_column-->
</footer>
css
.hidden {
display: none;
visibility: hidden;
}
#footer h4{
line-height: 1em;
margin:10px 0 0 0;
}
#footer{
width: 1100px;
height: 120px;
position: absolute;
bottom: 0;
margin-left: -560px;
left: 50%;
background-color: #CCC;
background-image: url(http://www.xente.mundo-r.com/turkish/ecomir_2/images/eccWhite_200.png);
background-repeat: no-repeat;
background-size: 400px 120px;
background-position: center;
}
.left_column{
width: 200px;
background-color: #FF0080;
float: left;
padding: 0 0 0 10px;
position: absolute;
bottom: 0;
}
.right_column{
width: 300px;
background-color: #FF00FF;
right: 0;
bottom: 0;
position: absolute;
}
you can simple use this FIDDLE
I tried to solve it but stylesheet little bit messed up in my opinion, so just remove the footer at all then try to apply your footer in your own style sheet just like I created.
Be careful while choosing class names because, if there will be a overload , it will messed up again
.footer
{
background-color:#CCCCCC;
width:400px;
height:100px;
margin-left:auto;
margin-right:auto;
font-size:9px;
}
I checked the HTML version, in your code you unnecessary use section remove that first.
by removing this you can remove the while space.
there are a lots of things which need to fixed ..but here is work around to vertically align the text.
.right_column
{
width: 25%; /*remove this line**/
display: inline; /*remove this line**/
}
Not able To fix it complete but the following point will help you a lot
I looked into your code not completely but found that you used
margin-left property although your left right div are 25 % and
center one is 50 % So there is not space for that margin . IF you
remove margin-left:10px (I suppose in your code). The White lines
will be removed and you can align text by setting margin-top.
I have not studied your whole code but not able to find clear:both
property as the bottom three div float. So do that as it is a good
practice and I think it will help in solving your issue
Either set background of section to #ccc or use padding not margin
Hope this help.....
I am trying to make these blocks of info the same size regardless of the number of words each one holds. As seen in the example, when one block has less text than the other, one gets a bit smaller and the other remains a different size.
Now my question is, How do I achieve having these blocks the same size regardless of its content or image? I am also going to use another pair right below them.
Here is the CSS code:
/***********All containers**************/
.bottomContainers{
position: absolute;
margin-left: 0%;
display: inline-box;
}
/**********Small Containers*************/
.container{
max-width: 30%;
max-height: 30%;
margin-top:5%;
margin-bottom: 5%;
margin-left: 10%;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 2%;
background-color: #ecf0f1;
color: grey;
display: inline-block;
/*display: inline-block;*/
border-radius: 5px;
border-bottom: 2px solid grey;
}
Here is the HTML code:
<div class="bottomContainers" role="moreInfo">
<!--Small Inner Containers for Information-->
<div class="container" id="firstContainer">
<br />
<center><img src="img/map.png"></center>
<br>
<article>
Some random text is in this block, It doesnt size like the next one
</article>
</div>
<div class="container" id="firstContainer">
<br />
<center><img src="img/money.png"></center>
<br>
this is another block which also doesnt scale to the other block regardless of text inside of it
</div>
What did I possibly do wrong here ?
I am heavily refactoring your original code in this solution. If this is a static width website then having static width cells won't be a problem. If you want this solution to be responsive you will have a lot of issues with it:
http://jsfiddle.net/VET6x/1/
I positioned the image and its corresponding text using absolute. Again that will work with a static layout, once it goes responsive there will be problems.
<div class="bottomContainers">
<div class="container">
<div>
<img src="http://placekitten.com/g/80/80" />
</div>
<div>
Some random text is in this block, It doesnt size like the next one
</div>
</div>
<div class="container">
<div>
<img src="http://placekitten.com/g/80/80" />
</div>
<div>
This is another block which also doesnt scale to the other block regardless of text inside of it
</div>
</div>
</div>
.bottomContainers { overflow:hidden; }
.container {
width:200px;
height:200px;
float:left;
position:relative;
margin:5% 5%;
padding:2%;
background-color: #ecf0f1;
color: grey;
border-radius: 5px;
border-bottom: 2px solid grey;
}
.container > div { position:absolute; bottom:10px; }
.container > div:first-child { position:absolute; top:10px }
If it were me I would find someway to avoid static height cells.
Here is one solution that may work for you:
Demo Fiddle
I changed up your code a bit. Using the center tag is frowned upon, also it looks like the br tags were there for spacing, which could be done with margin. I ended up giving .container a specified height, the main drawback in that being if the window is sized down too far the overflow text will be hidden.
HTML:
<div class="bottomContainers" role="moreInfo">
<div class="container" id="firstContainer">
<img src="http://www.placehold.it/100x100">
<p>
Some random text is in this block, It doesnt size like the next one
</p>
</div>
<div class="container" id="firstContainer">
<img src="http://www.placehold.it/100x100">
<p>
this is another block which also doesnt scale to the other block regardless of text inside of it
</p>
</div>
</div>
CSS:
.container{
// your current styles here
overflow: hidden;
height: 200px;
display: block;
float: left;
}
.container img {
display: block;
margin: 10px auto 0px;
}
This is a quick fix, but setting an explicit height on the objects will have them all be the same height. This requires some playing around with the best size and such but it will fix your problem. I'm curious how a professional would fix this problem.
Some other things with your code. Centering the <img> using HTML is discouraged, use css instead. Also, where are the <br> tags and why are some closed but some aren't?
Maybe you can use display:table;, display:table-row; and display:table-cell;. This way, your div will act like column of a table. They will stay at the same height.
Take a look at this jsfiddle!