How create table via div which always centered their cells. I mean, if width for example 302 px, table show 3 divs in one line with width of 90px, and space between those divs and border are equal (8px). And if table width changed to 210px, 2 div will shown in one line with equal space (10px), and third div will move to the next line. Window width is dynamic.
I would suggest using css and frameworks such as: twitter bootstrap or zurb foundationn, Check this out to get the overlaying image about responsive frameworks these have pre-set setups but you can also modify them to your liking..
You would need to change
x,y,z
to suit you because I don't exactly follow your math, HTML tables are out dated and should not be used!
<div class="row">
<div class="col-md-x">.col-md-4</div>
<div class="col-md-y">.col-md-4</div>
<div class="col-md-z">.col-md-4</div>
</div>
Related
I am working on this project, the url is grouporigin.com//clients/upload/WAHA_Capital1/index.html If you see the bottom section in the home page, the div boxes with the background images are behaving differently than the div boxes without a background image. They are also not covering the full height. What css changes I need to do, to make the divs with the background image behave in exactly the same way, as the div boxes without a background image.
as you are not providing any html i try by inspect element.. and you make comman mistake. while using bootstrap grid system you need to wrap every element in th form of <div class="row"> as you can see in pic the 3 div with class name "form-field" is not wrap around row class div
wrap these div around row like
<div class="row">
<div class="col-sm-12">
<div class="form-field">..</div>
do this for every row and give appropriate col-sm-* class
I've been trying a few techniques, but I'm getting stuck on this problem. I want to do the whole 100% height columns within a section thing, but one column has an image which needs to scale to fill one column.
So I have one column of text (variable content from WordPress) that is 66% wide and one column that holds an image and is 33% wide. The image can be on the left or the right based on a class.
My HTML:
<section class="page-section color-brand left-image image-third">
<div class="page-section-mid-wrapper">
<div class="image-wrapper left-image image-third">
<img src="img.jpg" alt="">
</div>
<div class="page-section-wrapper">
<div class="page-section-content">
Variable content here
</div>
</div>
</div>
</section>
Most of the CSS techniques do tricks to get a solid background color in both columns. But in this case, I want a scaled image. I'm willing to switch from an img tag to an inline style="background-image" to get the scaling to work, but either way, I'm having trouble getting the column heights to match.
The closest solution was to use display:table, but I don't like that I can't change which side the image is on without changing the HTML. With my current float based design, I can swap the image placement with just a different class (the left-image above for example).
With just floats, here is an example of what I have so far: http://jsfiddle.net/no80ayc2/2/
You'll notice that when the view is narrow, the image is shorter than the overall container height.
I've read something about using relative/absolute positioning, but the only way I could get that to work was with a fixed height for the container. That won't work for me: http://jsfiddle.net/qLa4g7fL/1/
EDIT: To clarify, I want the image to fill the entire space (33% width by 100% height). And I expect it to get cropped as necessary.
Here is an example of how that should look (just a quick idea)
change min-width: 100% into max-width:100% in .page-section.image-third .image-wrapper img
Then your image-wrapper may not have the full height but will stop your image to overflow.
You need to change your min-width to max-width,
Try to look at this link, I just update your code
http://jsfiddle.net/no80ayc2/7/
There's a new amazing css property called object-fit!
https://css-tricks.com/almanac/properties/o/object-fit/
You'll fall in love!
I am trying to create a KPI dashboard which has its displays each in their own "tiles", these tiles are of a static width and height (in the examples provided these are 200px). The website that these are being placed has the content in a <div> with the CSS attributes margin:auto and width:80%, this has been done to allow users with widescreens to benefit from an increased width of content. What I am after is the tiles to be left aligned as though contained in a table but to be central aligned within the tile container (which takes up the full width of the 80% width body).
I've created a JSFiddle here, I have previously created solutions which use JQuery taking advantage of the $(window).resize() handler and programmatically setting the width of the tile container however I am hoping that it is possible to do this with pure CSS to reduce the JavaScript required (I'm already using a lot on the page for AJAX and updating displays.
How is it possible to get the required alignment (pictured below) using purely CSS? Additional elements can be added but would prefer to keep the structure as simple as possible.
Update to Clarify requirements:
In my examples there are only 3 children, it is possible that the dashboard could have any number for example if you were to have 5 tiles it could be laid out as follows (depending on screen width available and changing of a page resizes):
5 on single row
4 on the top row 1 on the bottom
3 on the top row 2 on the bottom
2 rows of 2 tiles and a third with one
5 rows of 1 tile
Yes it is possible by explicitly defining the width of each element in pixels, but the width but:
the pageBody element MUST be width:80% (not 800px/600px as is common practice), screen real estate used is to be maximised (to a degree) allowing widescreen users to actually see more rather than only showing 600/800px in the middle of their screen.
the tileContainer MUST be centred within the pageBody and will "resize" according to the width used by the contained tiles (this CANNOT be explicitly defined in the CSS as n pixels as different users of the dashboard have different screen sizes and mobile devices make things even more fun). It is possible to do this by changing the width on page resizing using JQuery as previously stated but I'm looking for a CSS only solution.
the tile elements are to be left aligned within the tileContainer
There are images at the bottom demonstrating required behaviour.
HTML
3 Children:
<div class='pageBody'>
<div class='tileContainer'>
<div class='tile'></div>
<div class='tile'></div>
<div class='tile'></div>
</div>
</div>
CSS
.pageBody{
width: 80%;
margin: auto;
background-color:lightgrey;
}.tileContainer{
text-align:center; /*Removing this doesn't centre the tiles in their container*/
}.tile{
background-color:purple;
display:inline-block;
margin:5px;
width: 200px;
height: 200px;
}
Example: Left aligned within body
Example: Central aligned within body
Example: Required Alignment
TylerH was close.
I just took his jfiddle and modified it slightly. You need to add a width to your second containing div, then you'll be able to use margin auto to center it.
Jsfiddle
FIRST ISSUE:
Let's say I have a section in my website where I want to break the width of the container 1200px width. In this section I need to position an image on the very left side of the browser screen and on the right side some text.
I assume that in order to make this I have to use container-fluid and I'm using it like this:
<div class="container-fluid">
<div class="row">
<div> HERE IS THE CONTENT FOR IMAGE AND TEXT </div>
</div>
</div>
When I check this in the browser:
It appears an horizontal scrollbar and I have to remove the negative margins of the .row class in order to get rid of the scrollbar.
Is this the normal way of doing this?
SECOND ISSUE:
Let's say I want to create a section where I want to have a full width background color and the content to be withing the default bootstrap grid width of 1200px.
Is it necessary to create an container-fluid in order to do this? Or is better just to create an extra div an add there the background color ?
In Bootstrap, the grid is defined by three components: the container, the row and the column(s). The container comes in two flavors: container, which sets the max-width of the container for each of the specific breakpoints defined in Bootstrap and centers the container within the viewport; and the container-fluid, which simply sets the width to 100% of the viewport display. Both the containers set the padding to 15px.
The purpose of the row is to contain the columns which float left by default, so it will automatically clear the float. It has a -15px margin to negate the padding added by the container.
The columns go inside your rows. Columns are based on a grid of 12. If you only need one column at the x-small breakpoint and up, then add one col-xs-12. Want two equal columns at that viewport width, add two col-xs-6. Columns have 15px of padding left and right, so there are always consistent gutters.
The row margins negating the container width may sound useless, but it's important and very clever, because it allows you to nest rows and columns inside other columns allowing you to create an endless combination of grid divisions.
So, your issue is that you're not using the grid the way it is designed. You must have at least one column inside a row inside a container.
In bootstrap you need the following structure:
<div class="container-fluid">
<div class="row">
<div class="col-xx-xx">
...content goes here...
</div>
</div>
</div>
The reason of this structure is that the container will try to grab and center the content, in the case of the .container-fluid, it grabs 100% width columns instead of the traditional ~960ish pixels that has been used.
The row will allow you to allocate 12 columns of content in the order you decide, which is the next div.
The class .col-xx-xx will allow you to specify the breaking point of that column, lg for large devices, md for medium devices sm and xs for mobile/tablet devices.
The second dual xx in .col-xx-xx will allow you to specify how many of the 12 columns you're going to take in that container. For Example, .col-lg-3 Will be a column who's breaking point is as large device (1200px or so) and it will take 3 column spaces.
So it is necessary to use the structure above, else you will have that scrollbar on the x-axis bothering.
EDIT
As for your second problem, it is really necessary that you use the structure given above in the code, you want it to be full width? that means, no margins and paddings, I have a small trick for that that I have been using for a while now, I'll explain it below:
Use a container with the class of jumbotron as follows:
<div class="jumbotron my-own-jumbotron">
...content goes here
<div>
Since the jumbotron es designed to be responsive, it will act as a responsive container. on the next class, .my-own-jumbotron specify the background image or color you want for it, and depending on the content you add to it, it will adjust the size of it. I don't know if that's the solution you're looking for, but here's a demo:
https://www.hsoto.me/00295134567891srgsrgsrht36erdrbd5ye546/ipotra/
The third div will be a jumbotron with a custom background-image that expands as needed, and you can resize it and view it on a mobile device, and it is complete responsive, and full width.
I found that this way, it is not necessary to use the .container-fluid div.
So my problem is this - I have a div with fixed size of 970px. Inside it I want to create a horizontal menu where the first element will be a link to the home page with the logo of the company and the others will be standard links to different parts of the page.
What I want is to make the link with the logo wider than the other links and let the other links occupy the space left equally. Due to the fact that in near future the width of the container div may be changed even though I know the number of links I would like to use percentages to determine their width so the width of one link will be = (width of the div - width of the logo link)/5 (the number of link I'll have.
I tried with something like this
<div id="main-container">
<div id="logo-container">
</div>
<div id="standard-menu-container">
</div>
</div>
But I couldn't make it work (In fact all this is wrapped in one other div that I haven't shown here). So googling about this I get to the understanding that maybe using some sort of table may solve my problem. To be honest I have never used table this way but I followed an example and I got this result : JSFiddle Example where the red rectangle is meant to be my Logo link and the problem is that everything else is stacking under. In this particular example the logo link is excluded from the <ul> but I played around with that case too and simply trying to set one width in pixels and other - in percentage seems to be not what I need to do.
I would appreciate any help, just bare in mind that I tried a lot of styling with divs and display: inline-block and it breaks other parts of my structure so I would prefer a solution where the normal flow is not disturbed (like using a table for example)
You're on the right lines with the display: table-cell. I've made a few changes where you had extra code that wasn't needed, and set the <ul> to display: table, rather than the container. Adding table-layout: fixed will make items in the list (the cells) occupy an equal width.
Then, float the logo left, don't specify a width for #main-menu-navigation because then it will fill remaining space, and give it margin-left: 150px to cater for width of logo.
So that won't make much sense when read. Take a look here:
http://jsfiddle.net/LREbC/1/
Try resizing, the cells will adapt to the width.
Note: When using table-cell you don't need to define a width, the behaviour is the same as actual table cells.