I want to make a table with space between columns, on a background, like this :
And when I resize my page the text should not exit from box
#banner {
background-color: red;
margin-top: 70px;
background-size: cover;
height: 455px;
margin-left: 35px;
margin-right: 35px;
overflow: hidden;
}
.r1c1 {
float: left;
overflow: hidden;
width: 90%;
}
.r2c1 {
float: left;
overflow: hidden;
}
<div id="banner">
<div class="r1c1">
<h2>Once you've experienced the pleasure and comfort of hydronic heating, there's no going back.</h2>
</div>
<div class="r2c1">
<img class="voucher1" src="voucher1.png">
</div>
</div>
If you actually want to use a table, I would suggest using the <table> element directly. If instead you're making something like the display in your attached image, I have a few suggestions:
try using margins to keep the table cells separated
try placing a container div around your text and controlling its size to create the appearance that the cells have spaces between them.
try using Twitter Bootstrap. It's open source and fantastic and very easy to use. It has presets for a ton of different elements. Making what you want would be as simple as:
<div class="col-lg-5 col-md-5" id="r1c1"><div>
<div class="col-lg-2 col-md-2" id="spacer"><div>
<div class="col-lg-5 col-md-5" id="r2c1"><div>
Without having to further define the col-lg and col-md classes, you've taken advantage of bootstraps grid system and created a scalable table. Hope that helps!
Related
I was just about to answer someones question, when I stumbeled upon a weird behavior, which I cannot explain at the moment. So I have the HTML and CSS Code in the Snippet below. if you look at it on Full Screen, the bottom left blue div is below the red one. I tested this Code on jsfiddle, too, and it works as expected. The blue div is aligned with the red one.
Now, I do know, that this happens, because at Stackoverflow, the custom CSS gets applied BEFORE Bootstrap, while its the other way around on jsfiddle. So the styles are overwritten by each other, depending on which platform it runs.
I also know, that this is NOT the common approach to create a two column Layout. As mentioned, I found this behavior while trying to answer this question. In this case, the guy who asked the question was not able to change the HTML structure, so we had to deal with this.
What I don't know is, why there is a difference, since they both overwrite float: left; with float: left; I thought it doesn't matter where the css comes from, the behavior should be the same.
So here is the link to the fiddle: https://jsfiddle.net/we9jcd8c/
And here is the Stack Snippet
.blue {
border: 10px solid #fff;
background: blue;
height: 150px;
float: left;
}
.red {
border: 10px solid #fff;
background: red;
height: 300px;
float: right;
}
#media screen and (max-width: 768px) {
.red, .blue {
float: none;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="outer">
<div class="col-lg-6 col-sm-12 col-md-6 blue">
</div>
<div class="col-lg-6 col-sm-12 col-md-6 blue">
</div>
<div class="col-lg-6 col-sm-12 col-md-6 blue">
</div>
<div class="col-lg-6 col-sm-12 col-md-6 red">
</div>
<div class="col-lg-6 col-sm-12 col-md-6 blue">
</div>
</div>
To illustrate the difference, I added a picture:
As you said, the order of the style are the same.
But even in the blue block override float: left; by float: left; the red block has two different behavior : float: left; in bootstrap and float: right; according to the .red css class.
So on the fiddle snippet, the red block floats on the right allowing the bleu block to be in line and on stack overflow, the bleu tries to float left after the red block and is unable due to the 12 column being taken already.
This is classical mistake for somebody with no experience in CSS structure. The best way is to create 2 columns like:
here left boxes
here right boxes
If your content is dynamic, you must target box with problems and add after close this,
.clearfix { clear: both/left/right }.
But first way is the academic way to make columns in float based layout.
Update 2
Following #kidconcept's new update about using the table tag, I have modified it to make a centered
Table Timeline. Note: copy-pasting #kidconcept's into a local project (not on JS Fiddle) did not have this property. I also added css selectors to make changing direction easier.
Thank you for considering my question.
I am trying to make a custom row. What I want to achieve is describe in more detail under the headings description.
In addition I am including a JS Fiddle, which gets me close (maybe) to what I want to achieve (e.g. I put some work in).
I don't really get CSS3 that well, and the tutorials at W3-schools really only cover basics, however a deeper understanding of the difference between display options and what float actually does to the object is not readily given.
So I appreciate your assistance and am eager to learn from you :)
Description
JS Fiddle: A tri-element row with fixed size middle element
I am trying to make a row which contains exactly three elements. I want the middle element to have a fixed size and be centered. I want the other two elements (left / right) to have a fixed spacing to the middle element, but be responsive in size, see below:
In addition, I would like to stack these rows with a fixed spacing:
As well as be responsive to a small window size:
Update
Using the answer from #kidconcept you can make a reasonable timeline.
UPDATE: I think this is more easily solved with a table. Simply create a table with three columns and give a fixed width to the middle column.
<table>
<tr>
<td></td>
<td class="middle"></td>
<td></tr>
</table>
td {
background-color: tomato;
padding: 2rem;
}
.middle {
width: 10rem;
}
Table Fiddle
https://jsfiddle.net/botbvanz/2/
Problematic Flex method: flex. Learn more about flex here.
<section class="tri-element-rows">
<div class="left-element"></div>
<div class="middle-element"></div>
<div class="right-element"></div>
</section>
html, body {
height: 100%
}
section {
display: flex;
height: 50%;
}
div.middle-element {
width: 15rem;
height: 10rem;
}
div.left-element,
div.right-element {
flex-grow: 1;
}
div {
background-color: coral;
margin: 1rem;
}
To achieve the effect simply put three elements within a display: flex box. Set the middle elements width to be fixed, in this case 15rem. Then give the left/right elements flex-grow: 1, which indicates they should fill the remaining space equally. Give all the divs a fixed margin, in this case 1rem.
For the heights, I'm not sure I understood your requirements exactly, but if you want the height of the inner divs to respond to the window you can set their height to be a % of the parent container. For this trick to work you need to remember to set the height of html and body to 100% (this gives them something to be a percentage of. In this case i set the section-height to be 50%, which means that two rows will always fill the screen. One other gotcha is that if you set a padding or a border to the section element, the element will become 50% plus the padding and border. To avoid this, set box-sizing: border-box on the section tag.
Here is a fiddle: https://jsfiddle.net/ksgd6r11/
i would suggest use a framework
Bootstrap
Skeleton
and many more
It saves a lot of time and you can focus on logic
they all have offset as one of their classes
However how we achieve the same in Bootstrap is
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-xs-2 col-xs-offset-3 col-sm-2 col-sm-offset-3 col-md-2 col-md-offset-3 col-lg-2 col-lg-offset-3">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
</div>
</div>
what it does it gives a padding left to the left most block
In your case.check this(jsfiddle)
or rather
div.block{
width:32%;
height:50px;
border:1px solid black;
float:left;
margin:2px;
}
div.block-2{
width:31%;
height:50px;
float:left; border:1px solid black;
margin:2px;
}
div.margin-l{
margin-left:50px;
}
div.section-2{
margin:0 auto;
width:60%;
}
<section class="tri-element-rows">
<div class="block">
</div>
<div class="block">
</div> <div class="block">
</div>
<div class="section-2">
<div class="block-2 ">
</div>
<div class="block-2">
</div><div class="block-2">
</div>
</div>
</section>
I agree with kidconcept that the flexbox flex-grow property is your best solution. This article is a good resource for getting started with flexbox. Some developers still shy away from the flexbox module, but it’s extremely useful and browser support is great. That said, in the spirit of trying to help you learn a bit more, I created something close to what you’re asking for using simple floats.
Fiddle
<section class="row">
<div class="left">
<p>Left</p>
</div>
<div class="right-block">
<div class="center">
<p>Center</p>
</div>
<div class="right">
<p>Right</p>
</div>
<div>
</section>
<section class="row">
<div class="left">
<p>Left</p>
</div>
<div class="right-block">
<div class="center">
<p>Center</p>
</div>
<div class="right">
<p>Right</p>
</div>
<div>
</section>
.row {
width: 100%;
height: 180px;
margin-top: 20px;
}
.left p, .right p {
padding: 0 30px;
}
.left {
height: 100%;
background: red;
width: 40%;
float: left;
}
.center {
width: 140px;
height: 120px;
margin: 0 20px;
background: #4FBA49;
float: left;
text-align: center;
}
.right-block {
height: 100%;
margin-left: 20px;
overflow: hidden;
}
.right {
height: 100%;
background: #FDCF1A;
overflow: hidden;
text-align: right;
}
On a more conceptual level, floats pull elements from the normal flow of things on the webpage, shifting them to the left or right and allowing text etc. to wrap around them. Honestly, they’re not all they’e cracked up to be imo and I’ve always found them an imperfect solution. This article gives a helpful overview of floats.
You may also find this answer helpful in understanding how to use floats together with overflow: hidden property, a useful concept that I used in my Fiddle. Finally, you'll probably also benefit from reading up on css grids as well, especially in the context of Bootstrap or some other framework. Hope this helps!
I'm creating an image gallery for a website. The images appear as a grid : there are 3 images on every line when I open the page on my computer, but I may get more or less depending on the width of the window. This doesn't look bad at all, but I would like to improve it, so that it shows only two images, or just one per row, depending on the screen size. I could use media queries, but I only have bad memories about them and I would like to avoid using them if possible. Here is what my HTML looks like :
<div id="image_container">
<div style="background: url("image 1 url") center center no-repeat"></div>
<div style="background: url("image 2 url") center center no-repeat"></div>
(....)
<div style="background: url("image x url") center center no-repeat"></div>
<span style="display:block; clear: both;"></span>
</div>
and the CSS :
#image_container{
width: 95%;
margin: 5% auto;
border-radius: 10px;
border: 1px solid grey;
}
#image_container>div{
float: left;
width: 290px;
height: 164px;
margin: 2px;
overflow: hidden;
border-radius: 5px;
}
Thanks
The cheap way to do it is to change this in #image_container>div:
width: 100%;
max-width: 290px;
This trick will ensure that on too-small screens, the image will only take up the screen width and not the specified 290px.
Now you need to keep the aspect ratio. To do that, first calculate it: 164/290 = 56.55%. Take this value, remove the height from your styles, and add this:
#image_container>div:before {
display: block;
content: '';
padding-top: 56.55%;
}
This will give aspect ratio to your box, due to the clever trick that padding-top is a percentage of the parent element's width (and pseudo-elements are children of their main element).
With these combined, your boxes will stay the same shape but just get smaller if there isn't enough room.
That said, two points for you:
Media queries aren't all bad. Maybe you were just doing something not quite right with them. I would suggest looking into them again, as they are very powerful.
Generally the smallest width you need to worry about is 320px, the width of an iPhone. I haven't yet encountered a smaller screen than that, so your 290px boxes should be fine anyway.
If you're willing to use a framework like Bootstrap, you could use its grid system to get pretty much what you're looking for without doing the media queries yourself. You would just need markup like this:
<div id="image_container">
<div class="col-sm-6 col-md-4 col-lg-3"><!-- Image --></div>
<div class="col-sm-6 col-md-4 col-lg-3"><!-- Image --></div>
<div class="col-sm-6 col-md-4 col-lg-3"><!-- Image --></div>
<div class="col-sm-6 col-md-4 col-lg-3"><!-- Image --></div>
</div>
As long as the number of images displayed on each row is a factor of 12 (1, 2, 3, 4 or 6), then you'll always have complete rows.
I have been through a number of similar questions, and tried to adapt the solutions to my case, but haven't had success in doing so.
I am trying to implement something of a reader, so I have a reading pane which I want to center on my page. I want to limit the size of the pane so that the user is no reading lines spanning the full width of a large browser window, but I also want to have that pane centered in the window. Above the pane I have a header which spans the full width of the page.
Originally I tried to use "span8 offset2" for the reading pane, but as the size of the window is reduced, I want the margins to disappear before the pane shrinks, and using this setup, the reading pane shrinks unnecessarily, squeezing content, as the window is made thinner.
I get the correct behavior just using "span12" with "max-width: 700px" set, in terms of the reading pane shrinking as I want it to, but I cannot get the div to center on the page.
Here is what I have that I'm working with:
<body>
<div class="container">
<div class="row-fluid">
<div class="span12 reading-pane">
<div class="row-fluid">
<div class="nav">
<div class="span6 offset3">
Main Navigation
</div>
<div class="span2 offset1">
Nav2
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="body-text">
Text Area
</div>
</div>
</div>
</div>
</div>
</div>
</body>
The style for the reading-pane is as follows:
.reading-pane {
border: solid;
border-color: #ccc;
border-width: 3px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
min-height: 40px;
line-height: 40px;
max-width: 700px;
}
I have tried adding the following to the .reading-pane style (individually):
float: none;
margin-left: auto;
margin-right: auto;
margin: 0 auto;
float: none;
margin: 0 auto;
I've also tried centering text in the container which centers my header text, but not the reading-pane.
So how do I get the span12 div to center on the page?
I'm assuming since you're using row-fluid that you're using bootstrap 2.0. Bootstrap 3.0 handles responsive grids a bit more cleanly, so if you can I'd recommend using 3.0.
Then move your max-width to the container:
.container {
max-width: 700px;
}
Note that 700 includes the gutters so you may want to use 730.
Or better than using max-width, you can customize (http://getbootstrap.com/customize/) your twitter bootstrap download and define your own widths there if 700 is critical to you. And you can then also remove the larger #media queries then.
There's a few other tweaks to how grids are done on 3.0, which I included in this fiddle: http://jsfiddle.net/PQM34/2/
Hard to gauge without an example of your code and Bootstrap's source...
Note, it sounds like your using the framework incorrectly though. Why not just use span10, span8, etc. and center that?
In order to center divs, using margin:0 auto a fixed width is required (%, px, em, etc.).
Try adding this css to .reading-pane:
position:relative;
margin: 0 auto;
width: 700px;
float:none!important;
I'm making a website and want it to appear as a grid of boxes and rectangles.
I have a 6x6 grid of relatively-alined left-float divs. They work fine and fit neatly in a 900 width wrapper div. If i want a horizontal rectangle, i simply make one of these squares twice as wide (accounting for margins between, but that's irrelevant) and delete the one next to it. No problem.
The issue I have comes in when I want to make a rectangle twice as TALL. it ends up bumping everything left of it in the same row as it a line down. The same happens with a square twice as large (2x2 grid units).
Here's the code in jsfiddle:
http://jsfiddle.net/zucw9/
Essentially, how can I get either 8,9, and 10 to shift up one space, or for 6,7, and 8 to move into that gap, leaving 9 and 10 where 6 and 7 are right now?
http://jsfiddle.net/zucw9/10/
This solution isn't a very good solution but it works.
(I changed some of the names so i could read it better. (.grid_rect_tall became .grid_tall etc. margin-left:10px; margin-right: 0px etc.. became margin: 5px;)
basically you specify a -ve margin-bottom for the tall one and an extra margin so the other elements don't overlap.
.grid_square, .grid_long, .grid_tall
{
float: left;
margin: 5px;
background: #6CC;
}
#main{
position: relative;
width: 905px;
overflow: hidden;
border: 1px solid black;
padding: 5px;
}
.grid_square{
width: 140px;
height: 140px;
}
.grid_long{
width: 290px;
height: 140px;
}
.grid_tall{
width: 140px;
height: 290px;
margin-bottom: -150px;
}
.rbuffer
{
margin-right: 155px;
}
.lbuffer
{
margin-left: 155px;
}
I'd still go with my comment though and use either: http://960.gs or css3 grid layout: http://w3.org/TR/css3-grid-layout
EDIT:- I thought i better put a why to my comment earlier that this is not a good solution. Simply put: if you want to change the layout of the page you will have to change the classes on the items as well as having to change the css.
Also created one with even more elements to show the possibilities: http://jsfiddle.net/zucw9/11/ (or in em instead of px because i was bored. http://jsfiddle.net/zucw9/15/)
The layout is standard, how it should be displayed. I would recommend to use another div which wraps up the dives that appear before the taller div. This is not a very flexible solution though.
Edit: Move
<div class="grid_square">8</div>
<div class="grid_square">9</div>
<div class="grid_square">10</div>
higher in hierarchy after
<div class="grid_square">2</div>
should fix it.
i hope your thinking like below
code:
<div id="main">
<div class="grid_square">1</div>
<div class="grid_rect_long">2</div>
<div class="grid_rect_tall">3</div>
<div class="grid_square">4</div>
<div class="grid_square">5</div>
<div style="clear:both"></div>
<div>
<div class="grid_square">6</div>
<div class="grid_square">7</div>
<div class="grid_square">8</div>
<div class="grid_square">9</div>
<div class="grid_square">10</div>
</div>
</div>