css-float interview questions
Top css-float frequently asked interview questions
I want a div to be always at the right of its parent div, so I use float:right. It works.
But I also want it to not affect other content when inserted, so I use position:absolute.
Now float:right doesn't work, my div is always at the left of its parent div. How can I move it to the right?
Source: (StackOverflow)
Is it possible to stack up multiple DIVs like:
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
So that all those inner DIVs have the same X and Y position? By default they all go below each other increasing the Y position by the height of the last previous DIV.
I have a feeling some sort of float or display or other trick could bite?
EDIT: The parent DIV has position relative, so, using position absolute does not seem to work.
Source: (StackOverflow)
I would like to ask how height and float work. I have an outer div and an inner div that has content in it. Its height may vary depending on the content of the inner div but it seems that my inner div will overflow its outside div. What would be the proper way to do it? Any help would be much appreciated. Thanks!
<html>
<body>
<div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange">
<div style="width:500px; height:200px; background-color:black; float:right">
</div>
</div>
</body>
</html>
Source: (StackOverflow)
Normally, when we want to have multiple DIVs in a row we would use float: left, but now I discovered the trick of display:inline-block
Example link here.
It seems to me that display:inline-block is a better way to align DIVs in a row, but are there any drawbacks? Why is this approach less popular then the float trick?
Source: (StackOverflow)
I want my container div to get the height of max of its children's height. without knowing what height the child divs are going to have. I was trying out on JSFiddle. The container div is on red. which is not showing up. Why?
Source: (StackOverflow)
I'm implementing pagination, and it needs to be centered. The problem is that the links need to be displayed as block, so they need to be floated. But then, text-align: center; doesn't work on them. I could achieve it by giving the wrapper div padding of left, but every page will have a different number of pages, so that wouldn't work. Here's my HTML:
<div class='pagination'>
<a class='first' rel='nofollow' href='#'>First</a>
<a rel='nofollow' href='#'>1</a>
<a rel='nofollow' href='#'>2</a>
<a rel='nofollow' href='#'>3</a>
<a class='last' rel='nofollow' href='#'>Last</a>
</div> <!-- end: .pagination -->
And the CSS:
.pagination {
text-align: center;
}
.pagination a {
display: block;
width: 30px;
height: 30px;
float: left;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
width: 90px;
background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
width: 60px;
background: url(/images/structure/pagination-button-first.png);
}
To get the idea, what I want:
Source: (StackOverflow)
I know how to make 2 divs float side by side, simply float one to the left and the other to the right.
But how to do this with 3 divs or should I just use tables for this purpose?
Source: (StackOverflow)
In CSS the overflow:hidden is set on parent containers in order to allow it to expand with the height of their floating children.
But it also has another interesting feature when combined with margin: auto...
If PREVIOUS sibling is a floating element, it will actually appear juxtapose to it. That is if the sibling is float:left then the container with float:none overflow:hidden will appear to the right of the sibling, no newline - just as if it was floating in the normal flow. If the previous sibling is float:right then the container will appear to the left of the sibling. Resizing this container will accurately show it centered inbetween the floating elements. Say if you have two previous siblings, one float:left the other float:right, the container will appear centered inbetween the two.
So here's the problem...
How do I maintain that type of layout WITHOUT masking children?
Googling all over the web gives me ways on how to clear:both and expand a container... but I can't find any alternative solution to maintaining the left/right previous-child centering. If you make the container overflow:visible then the container suddenly ignores the layout flow of the floating elements and appears layered ontop of the floating element.
So question:
I have to have the container overflow:hidden to preserve layout...
how can I make it so the children aren't masked? I need to have the child absolutely positioned relative to the parent outside the container.
OR
How do I overflow:visible so I can absolutely position a child relative to the parent outside the container... YET preserve the sibling float-like-layout-flow?
Source: (StackOverflow)
I want a div with a fixed width image on the left and a variable width div with a background color, which should extend its width 100% on my device.
I can't stop the second div from overflowing my fixed div.
When I add overflow:hidden at the variable width div it just jumps under the photo, on the next row.
How can I fix this the right way (i.e. without hacks or margin-left, since I need to make the site responsive later with media queries and I have to change the image with other resolution images for each device)?
- beginner web designer trying to tackle the horror of responsive websites -
HTML:
<div class="header"></div>
<div class="header-right"></div>
CSS:
.header{
float:left;
background-image: url('img/header.png');
background-repeat: no-repeat;
width: 240px;
height: 100px;
}
.header-right{
float:left;
overflow:hidden;
background-color:#000;
width: 100%;
height: 100px;
}
Source: (StackOverflow)
I have been attempting to split a div into two columns using CSS, but I have not managed to get it working yet. My basic structure is as follows:
<div id="content">
<div id="left">
<div id="object1"></div>
<div id="object2"></div>
</div>
<div id="right">
<div id="object3"></div>
<div id="object4"></div>
</div>
</div>
If I attempt to float the right and left divs to their respective positions (right and left), it seems to ignore the content div's background-color. And other code that I have tried from various websites doesn't seem to be able to translate to my structure.
Thanks for any help!
Source: (StackOverflow)
How to horizontally center a floating element of a variable width?
Edit: I already have this working using a containing div for the floating element and specifying a width for the container (then use margin: 0 auto; for the container). I just wanted to know whether it can be done without using a containing element or at least without having to specify a width for the containing element.
Source: (StackOverflow)
This question already has an answer here:
I have infinite number of divs of a 100px width, which can fit into a 250px width parent. Regardless of height, I need the divs to be displayed in rows, as shown in the image. I've tried resolving this, but the div height seems to be screwing it up.
I'd really appreciate your help. Thanks :)
<style>
#holder{
width:250px;
border:1px dotted blue;
display:inline-block;
}
.box{
width:100px;
height:150px;
background-color:#CCC;
float:left;
text-align:center;
font-size:45px;
display:inline-block;
}
.one{
background-color:#0F0;
height:200px;
}
.two{
background-color:#0FF;
}
.three{
background-color:#00F;
}
.four{
background-color:#FF0;
}
</style>
<div id="holder">
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3</div>
<div class="box four">4</div>
</div>
Here is the jsfiddle
Source: (StackOverflow)
How can I make div 'left' and 'right' look like columns side by side?
I know I can use float:left on them and that will work... but on step 5 and 6 in here http://www.barelyfitz.com/screencast...s/positioning/
the guy says it is possible, I can't get it work though...
Code:
<style>
div.left {
background:blue;
height:200px;
width:300px;
}
div.right{
background:green;
height:300px;
width:100px;
}
.container{
background:black;
height:400px;
width:450px;
}
</style>
<div class="container">
<div class="left">
LEFT
</div>
<div class="right">
RIGHT
</div>
</div>
Source: (StackOverflow)
Every time I try to do something seemingly-simple in CSS, it punches me in the gut and steals my lunch money :(
I've been looking at this for over an hour and haven't made a bit of progress...
I have a content div that contains a 460x160 image. All I want to do is position the image at the bottom-right corner and wrap my text around it.
<div id="contents">
<img src="..." />
text text text text text text ...
</div>
So I want it to look like:
------------------
| text text text |
| text text text |
| text text -----|
| text text | |
------------------
Doing it with a top-left or top-right image is cake:
#contents img { float:right; }
------------------
| text text | |
| text text -----|
| text text text |
| text text text |
------------------
Now how do I push that to the bottom?
The best I've come up with so far are:
#contents img { float:right; margin-top: 90%} // really needs to be 100%-160px
------------------
| text text |
| text text |
| text text -----|
| text text | |
------------------
In this case the text does not print in the margin, so there is white space above the image.
#contents { position:relative; }
#contents img { position:absolute; right:0; bottom:0; }
-or-
// move the img tag under the text in the html and:
#contents img { float:right; margin-top:-160; }
------------------
| text text text |
| text text text |
| text text -----|
| text text | te |
------------------
In this case the text prints over or under the image.
So... how can I accomplish this?
Source: (StackOverflow)