I have 4 DIVs fitted in a row which have width:50% and are floating left so that two of them fit in a line. They have to have a min-width so the content can be shown completely. When I make the page smaller I only have one div in a line left (which is what I want) but its not centered any more...
I want those DIVs always to be centered! Can anyone help me?
HTML code:
<div class="row">
<div class="app-screen-div">
<div class="app-screen">
<img src="images/deal_list.png" alt="Deal Liste">
</div>
</div>
<div class="app-screen-div">
<div class="app-screen">
<img src="images/code_scan.png" alt="Scan">
</div>
</div>
<div class="app-screen-div">
<div class="app-screen">
<img src="images/deals_begonnen.png" alt="Started Deals">
</div>
</div>
<div class="app-screen-div">
<div class="app-screen">
<img src="images/enter_deal.png" alt="Enter Deal">
</div>
</div>
</div>
CSS:
.row {
margin:auto;
padding:auto;
}
.app-screen-div{
float:left;
width:50%;
min-width:280px;
margin:auto;
text-align: center;
position: relative;
}
.app-screen{
border-style:solid;
border-radius:5px;
padding: 1px;
border: 1px solid grey;
background-color:#ff5253;
width:280px;
margin:auto;
}
.app-screen > img {
display: block;
max-width: 100%;
height: auto;
}
thank you!
The solution was to use display: inline-block instead of float: left and I used text-align: center. Take a look at the example at http://jsfiddle.net/rqh0ompa/4/. Please note that you will have to enlarge the Result section quite a bit in order to see the change/
Related
<div class="wrapper" style="border-bottom: 2px solid black;text-align:center;">
<div class="left" style="float:left;">
<img class="styleLogo" src="ss.png">
</div>
<div class="right" style="float:right;">
<a href="home.html">
<img class="styleHome" src="home.png"></a>
</div>
<div class="center" style="text-align:left; margin:0 auto !important; display:inline-block">
<h2 class="heading1">ss</h2>
<h2 class="heading2">yyyy</h2>
<h5 class="subHeading1">jjjjjj</h5>
<h5 class="subHeading2">yyyyyy</h5>
</div>
</div>
This is the code i tried.pls help.i want to make ss.png float to right and home.png float to left and the headings shouls be in the exact center of div with wrapper class.
Using the "float" method:
If you want the center element to ignore the left and right elements and be centered in the viewport regardless of the sizes of the left and right elements, you will need to position the center absolutely to the wrapper (or use javascript to find the widths of left and right and set margins accordingly). See this fiddle
.wrapper {
position: relative;
width: 100%;
border-bottom: 2px solid black;
text-align: center;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
position: absolute;
width: 100%;
margin: 0 auto;
}
.center > h2, .center > h5 {
margin: 0 auto;
}
.clearfloats {
clear: both;
}
<div class="wrapper">
<div class="left">
<img class="styleLogo" src="https://dummyimage.com/170x170">
</div>
<div class="right">
<a href="home.html">
<img class="styleHome" src="https://dummyimage.com/50x45"></a>
</div>
<div class="center">
<h2 class="heading1">ss</h2>
<h2 class="heading2">yyyyyyy</h2>
<h5 class="subHeading1">jjjjjj</h5>
<h5 class="subHeading2">yyyyyyyyyyyy</h5>
</div>
<div class="clearfloats"></div>
</div>
To place the right image at the bottom right of the wrapper you could position it absolutely instead of floating it. Just change the .right class like this:
.right {
position: absolute;
right: 0;
bottom: 0;
}
Using the "CSS Grid" method:
You can eliminate floats and absolute positioning. There are all kinds of options for positioning within the grid. See this jsFiddle
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border-bottom: 2px solid black;
text-align: center;
}
.left {
justify-self: start;
}
.center {
align-self: center;
}
.right {
align-self: end;
justify-self: end;
}
.center > h2,
.center > h5 {
margin: 0 auto;
}
<div class="wrapper">
<div class="left">
<img class="styleLogo" src="https://dummyimage.com/170x170">
</div>
<div class="center">
<h2 class="heading1">ss</h2>
<h2 class="heading2">yyyyyyy</h2>
<h5 class="subHeading1">jjjjjj</h5>
<h5 class="subHeading2">yyyyyyyyyyyy</h5>
</div>
<div class="right">
<a href="home.html">
<img class="styleHome" src="https://dummyimage.com/50x45"></a>
</div>
</div>
<div class="wrapper" style="border-bottom: 2px solid black;text-align:center;">
<div class="flex" style="display:flex;flex-direction:row;justify-content:center;justify-content:space-between;">
<img class="styleLogo" src="ss.png">
<h2 class="heading1">ss</h2>
<h2 class="heading2">yyyy</h2>
<h5 class="subHeading1">jjjjjj</h5>
<h5 class="subHeading2">yyyyyy</h5>
<img class="styleLogo" src="ss.png">
</div>
</div>
</div>
</div>
</div>
You can make this kind of structure simply using CSS flexbox, just make the div element with class wrapper flexbox and then use the appropriate rules to align your content in it, for example first place the elements in the order you wish them to appear on webpage
<div class="wrapper">
<div class="left">
<img class="styleLogo" src="https://dummyimage.com/300.png/09f/fff">
</div>
<div class="center">
<h2 class="heading1">ss</h2>
<h2 class="heading2">yyyy</h2>
<h5 class="subHeading1">jjjjjj</h5>
<h5 class="subHeading2">yyyyyy</h5>
</div>
<div class="right">
<a href="home.html">
<img class="styleHome" src="https://dummyimage.com/300.png/09f/fff"></a>
</div>
</div>
Then use this CSS to adjust the content according to your need
.wrapper {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
border:1px solid #000;
align-items:center;
text-align:center;
}
.left img,
.right img {
width:100%;
}
.center {
min-width:33.33%;
}
You can alter the width of your left, right and center divs according to your wish or accommodate the content, and if you want your content to be centered vertically also then just add one new rule to wrapper div align-items:center;
If you are not familiar with the concept of flexbox then you can visit this resource for more information https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Edit: as per your requirement to make the center div to stay at exact center irrespective of the size and placement of the divs on sides you can use position:absolute; on center div like below:
.wrapper{
display:flex;
justify-content:space-between;
border:1px solid #000;
align-items:center;
text-align:center;
position:relative;
overflow:hidden;
}
.right{
margin-top:auto;
}
.right img{
width:50px;
height:45px;
display:block;
}
.left img{
width:170px;
height:170px;
display:block;
}
.center{
min-width:33.33%;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border:1px solid red;
}
Hope it helps!
I'm having trouble making my work neater. I'm really trying to learn how to simplify my efforts. But I start first with putting everything on the screen and then div'n the elements out. After I've seen all my elements, I tackle the css.
.left {
position: relative;
margin-top: 50px;
margin-bottom: 10px;
float: left;
height: 400px;
width: 33%;
}
.middle {
position: relative;
margin: 50px 3px 10px 3.5px;
float: left;
height: 400px;
width: 33%;
}
.right {
position: relative;
margin-top: 50px;
margin-bottom: 10px;
float: right;
height: 400px;
width: 33%;
}
<div id="header">
<p id="logo">GRAPEFRUIT</p>
<li>Home</li>
<li>Download</li>
<p id="fund">KickStarter</p>
</div>
<div id="top">
<h1>Split Screen Messeging - Texting With Motion Images!</h1>
</div>
<div class="left" id="preview"></div>
<div class="middle" id="preview"></div>
<div class="right" id="preview"></div>
<div id="footer"></div>
Link to see it work on jsFiddle --
http://jsfiddle.net/a1ynzr7p/1/
<div id="header">
<p id="logo"> GRAPEFRUIT</p>
<li>Home</li>
<li>Download</li>
<p id="fund">KickStarter<p>
</div>
<div id="top">
<h1>Split Screen Messeging - Texting With Motion Images!</h1>
</div>
<div class="evenThree" id="preview">LEFT
</div>
<div class="evenThree" id="preview">MIDDLE
</div>
<div class="evenThree" id="preview">RIGHT
</div>
<div id="footer">
</div>
CSS
.evenThree{float:left; width:33%;}
Another solution would be to use display:flex; on the parenting container of those three items.
http://jsfiddle.net/kqxyqL0f/3/
.contentWrapper {
display:flex;
}
.column {
width:33%;
}
<div id="header">
<p id="logo">GRAPEFRUIT</p>
<li>Home</li>
<li>Download</li>
<p id="fund">KickStarter
<p>
</div>
<div id="top">
<h1>Split Screen Messeging - Texting With Motion Images!</h1>
</div>
<div class="contentWrapper">
<div class="column" id="preview">TESTING LEFT</div>
<div class="column" id="preview">TESTING MID</div>
<div class="column" id="preview">TESTING RIGHT</div>
</div>
<div id="footer"></div>
Are you trying to create three columns (aligning div's horizontally)? You can simply wrap each column (left, middle and right) with a class that applies: float:left and width:33%.
As seen here: jsfiddle
.col-3 {
float:left;
width:33%;
}
<div class="row">
<div class="col-3">Left</div>
<div class="col-3">Middle</div>
<div class="col-3">Right</div>
</div>
Also some tips to help your code:
ID's are non re-usable, don't repeat them throughout the code. Either change them to a class or change the ID to be unique.
Make sure all the <li> elements are wrapped in a <ul> or <ol> tag
You can also do these two things. See the boxes 1 - 3, they're using DIV with CSS display: table-cell. Easier to get the contents inside centered in the box. The DIV containing Boxes 4, 5, and 6 are using display: inline-block - they're more flexible with using margins between them, but, you'll have to do something special to make the text go center (wrap it in <span>).
Or you can learn Twitter-Bootstrap (look it up). You'll be far better off with it when applying layouting for websites especially when your requirements are to make it mobile friendly.
.container {display: table;margin-bottom:30px}
.set {
display:table-cell;
width: 200px;
height: 200px;
text-align:center;
vertical-align:middle;
padding:10px;
background-color:#9a9a9a;
border:1px solid #444;
}
.set2 {
display:inline-block;
width:140px;
height:90px;
text-align:center;
background-color:#A75b5b;
margin: auto 10px;
border:1px solid #444;
}
<div class="container">
<div class="set">Box 1</div>
<div class="set">Box 2</div>
<div class="set">Box 3</div>
</div>
<div class="set2">Box 4</div>
<div class="set2">Box 5</div>
<div class="set2">Box 6</div>
My question is about CSS and DIV tags. I have a dynamic page, and I would like one container DIV. There are two scenarios: in one case, this container DIV will just have one DIV in it, with a width of 50%, and should be centered. In the other case, there will be two DIVs in it, and they should be side by side, each taking up 50%.
I have tried float:center (using overflow: hidden on the container DIV), and that works for 1 DIV in it, but with two, they are stacked on top of each other. If I use float: left, then the 2 DIVS appear correct, but the single DIV is left aligned, not centered.
Any help on how to achieve this effectively would be greatly appreciated!
<div style="width:800; margin: 2px; background-color:blue">
<div style="width:50%; background-color:orange;">
Text
</div>
<div style="width:50%; background-color:red;">
Text
</div>
</div>
jsFiddle
For the two-div scenario:
<div style="width:800; margin: 2px; background-color:blue; display: table;">
<div style="background-color:orange; display: table-cell;">
Text
</div>
<div style="background-color:red; display: table-cell;">
Text
</div>
</div>
Now for the one-div scenario:
<div style="width:800; margin: 2px; background-color:blue; display: table;">
<div style="background-color:orange; display: table-cell;">
Text
</div>
</div>
In each case, the inner divs, whether there are 1 or 2, will take up a combined 100% of the outer div. Essentially, it acts like the <table> element without having the semantics of a <table>.
check this fiddle
HTML
<div class="wrapper">
<div class="divholder">
<div style="background-color:orange;">DIV 1</div>
<div style="background-color:red;">DIV 2</div>
</div>
</div>
CSS
.divholder div{
display:inline-block;
margin:auto;
width:49%;
}
.divholder {
text-align:center;
margin: 0 auto;
position:relative;
}
.wrapper{
width:100%;
background-color:blue;
}
This perfectly deals with your need..While there is only one div, the div gets centered and if two divs come then both will be equally divided and floated left.Please see the fiddle..
Similar to chharvey's answer, this can be achieved nicely with display: table;
In my example it is centered horizontally and will work with any number of columns as they will fit themselves to the full width of div.wrap. The columns are currently given a height of 100%, this can be adjusted.
Have a jsBin example!
HTML
<div class="wrap">
<div class="column">
</div>
<div class="column">
</div>
</div>
CSS
html,body {
height: 100%;
}
.wrap {
display: table;
width: 800px;
height: 100%;
margin: 0 auto;
}
.column {
display: table-cell;
background: #FF0;
}
.column:first-child {
background: #F00;
}
Description of Problem:
I'm attempting to arrange the kittens in a star-like pattern with 3 DIV "rows." I would like for the first top row's kitten to be centered on the page (easy enough); the second (or '#middle') row to have their cats left-aligned and right-aligned, respectively; and the third ('#bottom') row to have its cats aligned similar to the second row, but slightly indented on both sides. Again, like a star.
I know the float property essentially makes the element(s) absolutely positioned, which collapses the bottom two rows' height, so that's probably not the right answer. But I've also tried text-align and futzing with margins. My brain is fried. What am I doing wrong?
Fiddle:
http://jsfiddle.net/k97CG/1/
HTML Structure:
<div id="top">
<div id="container1" class="containers">
<div id="cat1">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
</div>
<div id="middle">
<div id="container2" class="containers">
<div id="cat2">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
<div id="container3" class="containers">
<div id="cat3">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
</div>
<div id="bottom">
<div id="container4" class="containers">
<div id="cat4">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
<div id="container5" class="containers">
<div id="cat5">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
</div>
CSS Structure:
.containers {
position: relative;
width: 125px;
height: 125px;
}
#top, #middle, #bottom {
position: relative;
width: 100%;
border: 1px solid red;
}
#container1 {
margin: 0 auto;
}
#container2 {
float: left;
}
#container3 {
float: right;
}
#container4 {
float: left;
}
#container5 {
float: right;
}
Is there a reason you can't just place them all in one div, then position them with CSS?
<div>
<img id="img01" src="img1">
<img id="img02" src="img1">
<img id="img03" src="img1">
<img id="img04" src="img1">
<img id="img05" src="img1">
</div>
then
div {
position:relative;
width:100%;
height:100%;
}
div img {
position:absolute;
}
#img01 {
top:x;
left:y;
} etc
As a rule, you shouldn't rely on HTML for visually styling content unless you have no other option. That's what CSS is for.
Is this the one you are looking for:
#top, #middle, #bottom {
position: relative;
width: 100%;
border: 1px solid red;
clear:both;
}
DEMO
I'm making a web site responsive, and on the home page I should insert two "containers" that should be centered and aligned. (containers in this case are two divs with inside images and text)
I wish they would behave in this way
and when the page is "restricted", the two divs should position itself in this way
I tried like this, but it is not exactly what I would get
<div style="">
<div style="width: 300px;float: left;">
div 1
</div>
<div style="width: 300px;float: left;">
div 2
</div>
</div>
I'd try to use display: inline-block property. In this way you don't have to apply 'overflow' for parent and it's pretty easy to make blocks centered.
HTML:
<div class="wrapper">
<div class="box">Div 1</div>
<div class="box">Div 2</div>
</div>
CSS:
.wrapper {
text-align: center;
/* Just decoration */
border: 1px solid blue;
padding: 20px;
}
.wrapper .box {
display: inline-block;
width: 300px;
height: 50px;
/* Just decoration */
border: 1px solid green;
}
Take a look at the fiddle http://jsfiddle.net/caprella/y4BQ3/
I put something quick together for you. You will have to use media queries to find the size of the page when you want the style to switch. Mess around with my example and you should be able to figure something out to your liking.
<div id="box">
<div class="innerBox">
div 1
</div>
<div class="innerBox">
div 2
</div>
<div class="clear"></div>
</div>
And the CSS...
#box {
width:88%;
background:red;
padding:20px 6%;
}
.clear{clear:both}
.innerBox {
width:41%;
float:left;
background:blue;
display:block;
}
.innerBox:first-child {
margin-right:18%;
}
#media screen and (max-width: 400px) {
#box .innerBox {
float:none;
width:100%;
margin:20px 0 0 0;
}
#box .innerBox:first-child {
margin-top:0;
}
}
}
JsFIddle link: http://jsfiddle.net/x3JLX/
Check out this Fiddle. There's only a few simple changes to your existing code, which I included below.
http://jsfiddle.net/ArKKG/
<div style="overflow:auto; height: 100% text-align: center;">
<div style="width: 300px; height: 50px;float: left;">
div 1
</div>
<div style="width: 300px;height: 50px;float: left;">
div 2
</div>
</div>
And some CSS to make them visible, and keep the borders separated.
div{
border: 1px solid black;
margin: 4px;
}