I have a wrapper having a series of divs inside it in the form of boxes.
Here are some problems that I am facing.
When I resize the window, the elements appear to be left aligned. How do I centrally align them.
Also, another problem is that the size of the divs slightly vary, which misaligns them.
Here is the Fiddle
.left_wrapper
{
max-width: 70%;
margin:0 auto;
float:left;
}
.boxa
{
background-color: #45e645;
display:inline;
position:relative;
left:4%;
float:left;
margin: 1% 1%;
padding:1%;
font-size: 85px;
text-align:center;
border:1px solid green;
}
<div class="left_wrapper" id="roll_nos">
<div id="box" class="boxa">01</div>
<div id="box" class="boxa">02</div>
<div id="box" class="boxa">03</div>
<div id="box" class="boxa">04</div>
.............
.............
.............
.............
</div>
As suggested, the question is NOT a duplicate of the above mentioned question, though the problem is (only) similar to the one presented there.
The accepted and most upvoted answer is not applicable in my case because I want the elements to automatically move to next line when the window is resized.
Thanks to '#Niet the Dark Absol', The flex-wrap solution is working to center align the elements, but a slight misalignment still lies there, the red line near #13 highlights it.
For your vary div size "red line aligment" I recommend add:
.boxa {
min-width: 85px;
}
Using this without float:left code I found okay from my PC And browser !
.left_wrapper
{
max-width: 70%;
margin:0 auto;
}
Related
This question already has answers here:
Align <div> elements side by side
(4 answers)
Closed 4 years ago.
I have 2 div elements I want centered in my page. The outter div is 100% width and text-align: center. Like so:
div.centerpanel {
font-size: 28px;
width:100%;
height:100%;
text-align: center;
}
The two elements contained within it should appear next to each other but centered (they're both simply divs with text content). Simply put, I want a centered title on my page, each of the two words of the title being a seperate div. I read that you do the following to accomplish this:
float: left;
clear: none;
As far as I can tell, the 'clear' does not have any visible effect. When I add the float: left, to the first of the two elements, it simply causes that element to slide all the way to the extreme left of the outer .centerpanel while the element that follows it remains out in the middle where it should be. So it's definitely aligning it properly but inexplicably sends it all the way to the left.
How do I make it stay vertically aligned with it's following element but keep obeying the outer div's text-align: center?
If I understand your question correctly, something like this is what you want to have. And of course there are more than one ways to skin a cat.
HTML:
<div class="centerpanel">
<div class="left">L</div>
<div class="right">R</div>
<div class="clearfix"></div>
</div>
CSS:
.centerpanel {
font-size: 28px;
width:100%;
height:100%;
text-align: center;
}
.centerpanel div{
width: 50%;
}
.left{
float: left;
}
.right{
float: right;
}
.clearfix{
clear: both;
}
jsFiddle: http://jsfiddle.net/nfpdpmze/2/
Since there are only two divs here, you could also set them display: inline-block without using any flotation.
Side note:
There are of course more modern ways of clearing floating. One of them is by setting up the overflow property on the container of the divs that get floated. More about that here: https://css-tricks.com/all-about-floats/
You can also use display:inline-block; on your child elements. View this Fiddle for an example of how to accomplish this.
HTML:
<div class="centerpanel">
<div class="leftpanel">Left</div><div class="rightpanel">Right</div>
</div>
CSS:
div.centerpanel {
font-size: 28px;
width:100%;
height:100%;
text-align: center;
}
.leftpanel {
background:red;
display:inline-block;
width:50%;
}
.rightpanel {
background:blue;
display:inline-block;
width:50%;
}
Here you go:
<div style="display:flex">
<div style="text-align:center">
<span>Content1</span>
</div>
<div style="text-align:center">
<span>Content2</span>
</div>
</div>
I have a div element, that I essentially want to turn into a window (of sorts). Basically, within that div element is content that extends beyond the view port of the "window" (div element). Here's a picture of what I'm trying to accomplish:
Now, I tried creating a div element of a fixed size, and gave it overflow: hidden, then placed the larger bit of content within that. The problem is (and I've only tested this in chrome so far), that when one of the inner elements no longer fits 100% within the overflow area, it disappears.
To know what I mean, I've attached another picture:
Notice that the turquoise portion to the right is missing (sorry about the white spacing to the left of the yellow, that's just a bad crop job on my part).
Is this a solvable problem without doing something hackish (such as extending the width of the "window" box, then absolute positioning another box in the right portion to hide that new area)?
Edit The question has been answered, but here's the fiddle for everyone to see what I was trying to accomplish: http://jsfiddle.net/MRnL6/1/
Thanks!
I think I understand what you're getting at. I think your elements are dropping down to the next line because their parent container isn't holding them. Try creating a container inside your window to contain the elements with a width equal to all of its children. See this fiddle for example.
The HTML:
<div id="window">
<div id="container">
<div class="elem one"></div>
<div class="elem two"></div>
<div class="elem three"></div>
<div class="elem four"></div>
</div>
</div>
and the CSS:
#window {
height: 100px;
overflow: hidden;
width: 250px;
}
#container {
width: 400px;
}
.elem {
height: 100px;
float: left;
width: 100px;
}
.one {
background: #0f0;
}
.two {
background: #f0f;
}
.three {
background: #ff0;
}
.four {
background: #0ff;
}
If I understand you want to be able to scroll to the content? Try overflow:scroll.
I think you are trying to accomplish something like this.
Please see:
http://jsfiddle.net/UMJwT/2/
try adding a intermediatary
div
The easiest option is to restyle the inner portions so that they all fit instead of overflowing.
See this demo
#container{
width:400px;
height:100px;
border:5px solid gray;
margin:10px;
}
.test{
display:inline-block;
width:25%;
height:100%;
}
I have two divs: left and right. In the left there is a long text. In the right there are some annotations about the text (more divs). If the text of the left is longer than the annotations I'm like it. But when the annotations are bigger/longer then the left div, I want to make the right div's content overflow.
With other words: two divs without fix height, make overflow the right one.
The code is above or JSFiddle
<div id="container">
<div id="left">Some long-long text, allways to show</div>
<div id="right">Some divs not necessarily show all</div>
</div>
css:
#container {
background-color:white;
float:left;
}
#left {
width: 79%;
float:left;
}
#right {
width: 19%;
float:right;
overflow: hidden;
}
But it's not working. :(
As Jan suggested in his last comment, I think you need to use javascript or jQuery to accomplish this.
This question outlines an approach using javascript that was accepted by the OP, though the OP made no comments on his process of execution.
I've modified a js fiddle from this answer to a similar question.
It uses the following:
CSS
#main{
width:auto;
}
#one{
height:auto;
width:200px;
display:inline-block;
float:left;
}
#two{
height:100%;
width:200px;
float:left;
display:inline-block;
overflow: auto;
}
div{
border:1px solid black;
}
Javascript
$(document).ready(function() {
$("#main").css("height",$("#one").height());
});
And I believe addresses your desired outcome.
You have to use overflow: hidden on #left, and not on #right.
I'm wondering what the best way to go about doing this is...
I have 3 divs:
a div#container with width=100%; that holds 2 inner divs
a div#inner_left with width changing dynamically, but no wider than 200px (will hold a product image)
an div#inner_right where the width should fill the rest of the space in the container (will contain text to describe the product shown)
#container {
width:100%
}
#inner_left {
display:inline-block:
max-width:200px;
}
#inner_right {
display:inline-block;
width:100%;
}
The problem is that the div#inner_right creates a line break and fills the entire width. How can I make them align next to each other, with the right div accounting for the width taken by the left div (which changes dynamically?). I've gotten this to work other ways, but I'm looking for a clean solution...
Any help for a CSS noob is much appreciated!
I haven't really seen a good solution in the answers here. So I'll share mine.
Best way to do this is by using the table-cell option in CSS. One important thing to add is a 'min-width' to the element that has a pixel width.
Example:
<div id="left">
Left
</div>
<div id="right">
right
</div>
CSS:
#left {
display: table-cell;
min-width: 160px;
}
#right {
display: table-cell;
width: 100%;
vertical-align: top;
}
Have a look at "liquid layouts" it can describe what you're talking about.
You're probably looking for this one.
In your example, try setting your display to inline. However, you won't technically be able to use block level elements in it, so have a look at the links I posted above. :)
The problem with setting the width to 100% if you're using floats is that it is considered 100% of the container, so it won't work either since the 100% includes the left div's width.
Edit: Here is the example of the other answer, I've edited it to include the html/css from the example site above for simplicity's sake.
I'll also include it below:
HTML
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fluid</em></b></div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>200px</em></b></div>
</div>
CSS
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
}
#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}
This can be accomplished using Flex-Box, which has been introduced with CSS3 and according to Can I use is cross-browser.
.container {
display: flex;
}
.left {
width: 100px; /* or leave it undefined */
}
.right {
flex-grow: 1;
}
/* some styling */
.container {height: 90vh}
.left {background: gray}
.right {background: red}
<div class="container">
<div class="left">100px</div>
<div class="right">Rest</div>
</div>
So even though I wanted to do this with CSS only, I ended up just using tables...
Use floating:
#container{
width:100%
}
#inner_left{
float:left;
max-width:200px;
}
#inner_right{
float:left;
width:100%;
}
Edit: have a read a this, it's a nice little guide : quirksmode
you need to provide position:absolute style property to both your div's
This is based on #w00 's answer. +1 friend.
My situation was when I wanted to show a couple of icons next to a label. I use the fluid class for that which is where the nowrap comes in. This is so the icons appear on the same line.
.sidebyside-left-fixed, .sidebyside-right-fixed
{
display: table-cell;
width: 100%;
}
.sidebyside-left-fluid , .sidebyside-right-fluid
{
display: table-cell;
vertical-align: top;
white-space: nowrap;
}
Here is an easy method to achieve this, and this is something that's quite frequently needed. It's also tested to works with all browsers, including the very old ones (let me know if it doesn't on any).
Link to a sample: https://jsfiddle.net/collinsethans/jdgduw6a/
Here's the HTML part:
<div class="wrapper">
<div class="left">
Left Box
</div>
<div class="right">
Right Box
</div>
</div>
And the corresponding SCSS:
.wrapper {
position: relative;
}
$left_width: 200px;
.left {
position: absolute;
left: 0px;
width: $left_width;
}
.right {
margin-left: $left_width;
}
If you are not using any CSS preprocessors, then replace the $left_width with your value (200px here).
Credit: This is based on http://htmldog.com/examples/pagelayout2/.
There are several other useful ones there.
I have a page in which a header consists of three divs - one that's floated to the left, one that's floated to the right, and one that's in between them. I'd like for that central div to be centered, yet sadly float: center doesn't exist and I can't just float it to the left and add padding as it'd have to change depending on the window size.
Is there something simple I'm overlooking? Or how would I do such a thing?
Update:
In addition, I'd like to find a way of centering that middle div in the space between the divs in case that looks better.
If you have two floated divs, then you know the margins. The problem is that the float:right div should be put before the middle div. So basically you will have:
left-floated | right-floated | centered
Now, about the margins: usually you can just use margin:0 auto, right? The problem is that right now you know the values of the margins: floated divs! So you just need to use:
margin:0 right-floated-width 0 left-floated-width
That should work.
Years later edit
Meanwhile, a new toy is in town: flexbox. The support is fairly good (i.e. if you don't need to support lower than IE 10) and the ease of use is way over floats.
You can see a very good flexbox guide here. The example you need is right here.
Indeed, the important part is that the centered div come after the left and right divs in the markup. Check out this example, it uses margin-left: auto and margin-right: auto on the centered div, which causes it to be centered.
<html>
<head>
<style type="text/css">
#left
{
float: left;
border: solid 1px red;
}
#mid
{
margin-left: auto;
margin-right: auto;
border: solid 1px red;
}
#right
{
float: right;
border: solid 1px red;
}
</style>
</head>
<body>
<div id="left">
left
</div>
<div id="right">
right
</div>
<div id="mid">
mid
</div>
</body>
</html>
Here's a JS Bin to test: http://jsbin.com/agewes/1/edit
Usually you can use flexbox instead of floats:
https://jsfiddle.net/h0zaf4Lp/
HTML:
<div class="container">
<div>left</div>
<div class="center">center</div>
<div>right</div>
</div>
CSS:
.container {
display: flex;
}
.center {
flex-grow: 1;
}
The element with the centered content needs to be specified after both floated elements. After that, simply set the middle element to text-align: center. The text in the centered element will squeeze in between the floats.
See here:
http://jsfiddle.net/calvintennant/wjjeR/
Try this (make sure to use better class names):
.left {
float:left;
width:200px;
}
.right{
float:right;
width:200px;
}
.center {
overflow:hidden;
zoom:1;
}
The center div will fit between the two floats.
If you want to create a gutter between that centered div and the two floats, then use margin on the floats, not on the center div.
Because of "zoom", the CSS will not validate, but that layout will work in IE 5.5 and 6.
Note that source order is important here: the two floats must come first, then your "centered" div.
In some cases, you have a limitation and cannot change the page markup by moving the middle div after the right-floated div. In that case, follow these instructions:
For container: position: relative
For middle div: position: absolute; left: [containerWidth - middle-width / 2]
I hope you got the idea.
A simple solution without having to change the order of the divs (sometimes we can not do this) could be an absolute positioning for the center div as follows:
.container {
position: relative;
}
.container div {
width: 200px;
background: red;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
}
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
https://jsfiddle.net/Helioz/nj548y0g/