I have list of tiles with different widths. All of them are sitting inside the .projects with auto width, and it's wrapped by another div (.wrapper), which has 100% width.
<div class="wrapper">
<div class="projects">
<div class="pro p1"></div>
<div class="pro p2"></div>
<div class="pro p4"></div>
<div class="pro p2"></div>
</div>
</div>
I want to have .projects block centered, but .pro should be floating left, because I want to keep tiles aligned left, so I cannot use display: inline-block; for .pro elements.
It works perfectly if number of elements can fit in one row -> than .projects width is equal to sum of widths of all .pro containers inside (first and second example in Fiddle).
But if number of elements is bigger, they go to another row, .projects container became 100% width instead of real max width of inside elements.
Is it possible to achieve width of .projects not 100% if child elements doesn't fit in one row instead of effect from the last example?
Take a look on the code: http://jsfiddle.net/68U47/2/
.projects {
width: 600px;
margin: 0 auto;
}
[class^="pro"] {
display: inline-block;
width: 20%;
float: left;
}
Something like this should do it, basically margin 0 auto on the projects will center it on the screen.
Related
I have a container containing multiple elements with a min-width and some padding to the right and left, the problem is in need them centered and in a column with each one in a separate row, the content of each one of them differs, causing the elements to have different width, like this
+--------- container ---------+
|child1 is too long|
|child2|
|child3 is long|
|child4|
+-----------------------------+
how can I make them all have the width of the largest element while maintaining a max-width in the same time, i.e. if the content gets too long, it breaks down to the next line while maintaining the width.
Attached below a screenshot, the above is the current situation, the one below is the desired result
You can wrap the items with a display:inline-block element,
and wrap that element in a text-align:center element so it would be centered:
.centered{ text-align:center; }
.wrapper{
display: inline-block;
font: 24px Arial;
text-align: left;
}
.wrapper > div{
border: 2px dashed pink;
margin-bottom: 4px;
}
<div class='centered'>
<div class='wrapper'>
<div contenteditable>try typing here</div>
<div contenteditable>aaaaa</div>
<div contenteditable>aaaaa aaaaa</div>
<div contenteditable>aa</div>
<div contenteditable>aaaaaaaaa</div>
</div>
</div>
The inner children are block level elements (<div>) which means they will take the whole width of their parent element, where the parent is an inline-block. This will result the parent is as wide as the widest child.
How do I set the width of a div if I want it to be exactly as wide as its contents are. However, I have many children in my DIV that inevitable collapse because they take up more horizontal space than the div allows.
I have this CSS:
.outer{
width: 100%;
background-color: green;
}
.inner{
width: auto;
display: inline-block;
margin: 0 auto;
background-color: red;
}
.row{
float: left;
width: 250px;
background-color: blue;
display: inline-block;
}
And this is my HTML:
<div class="outer">
<div class="inner">
<div class="row">asd1</div>
<div class="row">asd2</div>
<div class="row">asd3</div>
<div class="row">asd4</div>
</div>
<div class="clear"></div>
</div>
Here is my jsfiddle: http://jsfiddle.net/vullnetyy/pshao68g/
What I want to do here is:
the red div must be exactly as wide as the 3 blue divs in its first row
the red div must be centered within the green div
javascript must be avoided
no static width may be set to the red or green divs (because this is supposed to be responsive, and an arbitrary number of blue divs may be provided)
First of all, if you want to center an Element you need to make it:
display: block;
width : %/px;
margin-left: auto;
margin-right:auto;
If you want the 3 blue divs to be inside of the red div and to be exactly 3 blue = 1red width, give each blue 33.333% width.
such as in this example: https://jsfiddle.net/vullnetyy/pshao68g/
Theres two conflicting issues here.
1)You must have a set width in order to do margin-left/right auto.
2)If you float to try to match child width you cant do margin auto. Now I know you didnt put float left on inner. But you did do display:inline-block which has float left and a few other rules attached.
In this particular case, you have to compromise just a little to get the results you want. Simply set .inner to the same as the row aka 250px since we know thats how large the child will be, and remove display:inline-block and PRESTO!
try this for to your inner and see what happens.
.inner{
width: 250px;
margin: 0 auto;
background-color: red;
}
I have read answers on Stackoverflow, on how to stretch a div to full width when inside a fixed width container. But those are valid only if the content is inside one fixed container, what if the content is inside many div tags whose widths have been differently specified.
<div class='container' width="50%">
<div>
<div>
<div>
<div>
<div class="container-to-stretch"> Some Content </div>
</div>
</div>
</div>
</div>
</div>
Setting position to absolute and left and right to 0 simply doesn't work.
here is a jsfiddle that will help you http://jsfiddle.net/Fm7M5/
in your example (if i understand the question correctly), once CONTAINER has a width of 50%, that width is 100% for all of it's nested elements. so, the unclassed divs & CONTAINER-TO-STRETCH all have an automatic width that is 100% of CONTAINER.
so, you will need give CONTAINER-TO-STRETCH a width that larger than the width of its container.
in the jsfiddle, you can see the following (where TEST is a class given to one of the unclassed divs)
.container {
background-color: red;
}
.container-to-stretch {
background-color: yellow;
width: 400%;
}
.test {
width: 25%;
background-color: blue;
}
so, CONTAINER has a width that is 50% of the body, TEST has a width that is 25% of 50% of the body, and CONTAINER-TO-STRETCH has a width that is 400% of 25% of 50% of the body.
I am trying to center a set of floated blocks that contain images that scale dynamically. However I am having an issue where the inline-block I am using to enter the floated blocks is not shrinking to the new size of the image. Instead it will wrap to the original size of the image, leaving a big empty space.
http://jsbin.com/ewonas/1/
body {
text-align: center;
}
.inlineblock {
background: red;
display: inline-block;
}
.constrainer {
width: 20%;
float: left;
}
.constrainer img {
width: 100%;
}
<body>
<div class="inlineblock">
<div class="constrainer">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/500px-Smiley.svg.png">
<h1>Product title</h1>
</div>
<div class="constrainer">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/500px-Smiley.svg.png">
<h1>Product title</h1>
</div>
</div>
</body>
Can somebody please help me fix this issue?
Thanks
You are setting the width of the two .constrainer divs to 20%. What this means is that the width is 20% of the parent .inlineblock. So when you have to two of them that adds up to 40% of the parent. That means you have 60% remaining, or space for another 3 .constrainer divs.
To make the .inlineblock element shrink down, you would need to set the width of the .constrainer divs to a number independent of its parent e.g. a fixed width like 300px instead of a percentage.
Live example: http://jsbin.com/ewonas/6
http://jsfiddle.net/zEcn3/12/
I'm trying to get a div content that resizes to the number of divs that fit in a line. So the example works fine when the window is bigger than all the item divs combined so they're all in a row, but when the window is resized smaller so one of the items is reflowed to the next row, the content div's width is 100% instead of shrink wrapped.
The reason I want this is so I can have centered content with a menu bar above the content that shrinks to the size of the combined reflowed content.
HTML:
<div class="wrapper">
<div class="content">
<div class="item">Hello.</div>
<div class="item">Hello.</div>
<div class="item">Hello.</div>
<div class="item">Hello.</div>
<div class="item">Hello.</div>
</div>
</div>
CSS:
.item {
float: left;
width: 70px;
border: 1px solid black;
}
.content {
display: inline-block;
border: 1px solid black;
}
.content:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
A friend figured it out for me, the answer is to use media queries.
#media (max-width: 1080px) {
#main {
max-width: 640px;
}
}
So I set at the intervals of the width of each item div, so when the viewing window is smaller than a certain number, it sets the width of the container to the next level down.
I'm not quite sure if you were trying to remove the 100% width on the container, or just have the container shrink along with the content, depending on the size of the screen.
The problem, as I see it, is that when I shrink the screen, the last "Hello" on the right side gets pushed down to the next row.
So what I did is set 100% width to the wrapper. I then just removed the fixed width from the items and changed it to % widths. In this case I took the number of boxes and divided them into 100%, which was 20% each (but with 1px border I reduced to 19% each). Also, I added display:block; margin-left:auto; margin-right:auto; to the id="content".
Here's the link to JS Fiddle: http://jsfiddle.net/rm2773/Lq7H7/
I found the answer here:
http://haslayout.net/css-tuts/CSS-Shrink-Wrap
It basically amounts to using display: inline-block; on the block element you want to shrink to fit its contents.
Try to use margin:auto to the container <div> and set a fixed position.