I am trying to achieve the following layout in html. Bigger div 1. Then another div next to it with a margin on the top. If I give float: left to the first div, on giving margin-top to the second div also brings the div 1 down. :(
please suggest.
Here's what you want, tested and working :)
http://jsfiddle.net/4FWWp/
HTML
<div id="first"><p>Hello<br/>Test</p></div>
<div id="second">World</div>
CSS
#first{
background-color:red;
float:left;
}
#second{
background-color:blue;
float:left;
margin-top:52px;
}
Take a look:
http://jsfiddle.net/Dc99N/
.d {
display: inline-block;
border:2px solid;
width: 200px;
height: 200px;
}
.sm {
margin-top: 50px;
height: 150px;
}
Took a quick stab at it and it seems possible.
What you need to is display inline-block on the divs and set the height of the divs as percentages.
Check out my codepen : http://codepen.io/nighrage/pen/bKFhB/
The grey background is of the parent div.
Flex-box could be the best and easier solution.
IE supports it since version 11, and currently all major browsers have a good support. Maybe is still a little soon but.... I think that in few months could be a very interesting feature.
Please, look at Flexible Box Layout Module
Related
I don't really know how to approach this, but this is what I'm trying to do, placing the white arrowbox:
I know how to do an arrowbox, but placing it like that is a mystery to me. At the moment I have two sections, upper and lower, and then tried giving the box an absolute position, but didn't work.
How should I approach this problem? I'm sure there is an easy solution, but I'm not that experienced with CSS.
didn't understand your question very well myself. IF you are trying to position your box in the middle of the lower blue container with: position:absolute I would try this myself
.box {
height:100px;
width:300px;
background-color:red;
position:absolute;
top:-50px;
left:50%;
margin-left:-150px; /*this has to be half your box width negative margin*/
}
Don't forget to add position relative to your blue div (or fixed, or absolute... just not default static). A fiddle as an example ( I add css box arrow just in case you need it): http://jsfiddle.net/j5a0227s/1/
Clearly misunderstood your question. Please see the updated JSFiddle.
This places a green block below the middle circle, but by giving it the position: absolute, you can change the location with margin-top. I don't know how this reacts in responsive websites, you might want to tweak it a bit.
Edit2: Even better is to place the white block in the div you have above the circles. See this updated JSfiddle.
HTML
<div class="main">
<div class="container0">
<div class="hover2"></div>
</div>
</div>
CSS
.main {
margin-top:100px;
}
.hover2 {
height: 50px;
width: 100px;
background: green;
margin-left:180px;
position: absolute;
margin-top:60px;
}
.container0 {
background: purple;
width: 100%;
height:100px
}
Wrap your two sections with a div and take a close look at this interesting article: Centering in CSS: A Complete Guide.
I know this is a standard question, but I am trying to get a very special behaviour. I got the following example code:
CSS:
.left{
background-color: red;
min-width: 300px;
width: 40%;
float: left;
}
.middle{
background-color: blue;
width: 40%;
overflow-x: auto;
white-space: nowrap;
float: left;
}
.right{
background-color: green;
min-width: 100px;
width: 10%;
float: left;
}
HTML:
<div class="left">LEFT</div>
<div class="middle">This shall get a scrollbar if necessary. Here may be long content.</div>
<div class="right">NOWRAP</div>
I do not want anything to wrap. When resized, the middle div should be rezized, but it shall never wrap!
I need variable widths.
When I shrink the browser window, at first it looks right: The middle div becomes smaller and gets a scrollbar. This is what I am looking for. But when I continue shrinking the green div gets wrapped. Instead I want the middle div to become smaller and smaller.
I am already using bootstrap 2.
Thanks for your help,
best regards,
Yaron
The green div gets wrapped until the min-width is reached. Then your div.right ("NOWRAP") will float under the middle and left div. To avoid this your have to reverse the order of your divs:
<div class="right">NOWRAP</div>
<div class="middle">This shall get a scrollbar if necessary. Here may be long content.</div>
<div class="left">LEFT</div>
Then make your .right div
position: absolute;
right: 0;
and delete the float.
Now you only have to change your floats from the left and middle class to "right" and the width to for example "50%". That's all.
Here an example: http://jsfiddle.net/5MdY3/
Here's the ANSWER.
I've used Bootstrap 3 CSS framework in order to achieve what you asked for with my knowledge. I guess so it can even be done without bootstrap but I'm not that expert. By your post i'm thinking that you're looking for some responsive design. To make it easy I'd suggest you to use Bootstrap 3. Amazing framework that helps to do a lot more things in a seconds.
I need to display text around a floated element that itself has been pushed downwards. The HTML/CSS is very simple:
<div id="container">
<div id="shim"></div>
<div id="myimg"></div>
<p>This is a test to demonstrate the float overwriting issue. The blue box represent an image that I don't wish the text to overwrite...</p>
</div>
CSS:
#container {
width: 200px;
}
#shim {
float:right;
width: 1px;
height: 40px;
background-color: red;
}
#myimg {
clear:both;
float:right;
width: 100px;
height: 40px;
background-color: blue;
}
It works perfectly in Chrome and Firefox, however in Safari the text overwrites my floated element.
I've created a fiddle to demonstrate the bug (obviously, you'll need safari to see it):
http://jsfiddle.net/8JLFp/
Can anyone find a solution or suggest another way of doing this?
Please check the same issue on this site. May be this helps you.
Possible Solutions.
Try adding clear:both divs
Use overflow:hidden
I know this might be an old question, but its still valid today.
I got mine fixed by adding to the parent tag :
style="width: 100%;"
Which in your case, the div with id=container.
Hope this helps.
I have already read this question but I can't get my head to work a solution that fits my needs, because my situation is a bit different and because I am not very good at CSS.
What I have is a div containing three other divs:
div1 on the left
div2 centered
div3 on the right
The problem is that div2 may or may not exist.
This is what I currently have:
But this is what I want:
Here is my Fiddle
Any ideas?
Thanks!
#div3{
display:block;
background: #CCC;
overflow: hidden;
}
http://jsfiddle.net/5xgwz/17/
check this http://jsfiddle.net/geQqG/16/ and then just copy this code and paste in your dreamweaver and run with firefox browser......
just add overflow:auto; in your div3's css that will work
Hi i think you want this
Please remove to width of #container
as like this
#container {
padding: 5px;
}
and over-right properties to this #div3 as like this
#div3{
display:block;
background: #CCC;
overflow: hidden;
}
Now Live demo is http://jsfiddle.net/5xgwz/20/
I have two <div> elements, one next to the other. Both have the CSS attribute display: inline-block;. Now the second <div> element has a fixed width of 100 px, whereas the first <div> element doesn't have a fixed width: it depends on the size of the window.
My problem is that the first <div> element will spread over 100% vertically if the window is narrow. I would like to restrict its width to 100% minus 100px, so that both <div> elements can align one next to the other at all times.
I've looked at posts with similar questions, but none really dealt with the case of inline-block.
EDIT: Here is a jsfiddle: http://jsfiddle.net/y3sXu/ I want the first <div> to provide some room for the second <div> on the same line.
There's no particular reason to use display: inline-block to do this.
Here's a clean implementation using floats instead: http://jsfiddle.net/y3sXu/14/
<div id="container">
<div id="DivB">b</div>
<div id="DivA">a</div>
</div>
#container {
overflow: hidden;
}
#DivA {
overflow: hidden;
}
#DivB {
float: right;
width: 100px;
}
This is an old question but has some weight in Google so I thought I'd update it with a new answer. A more modern way to accomplish this is to stick with display:inline-block; and use calc for the width of the variable element.
So long as you have one fixed width inline element width: 150px, you can offset the variable width element by the fixed width calc(100% - 150px).
Your code should look like this:
.fixed-width-element {
display: inline-block;
width: 150px;
}
.variable-width-element {
display: inline-block;
width: calc(100% - 150px);
}
I think I understand what you are asking for. http://jsfiddle.net/y3sXu/6/
I have gone for a traditional two column layout, as it seems like the best way to solve your problem.
float has been used to ensure that the right hand div always sits on the right, and margin-left to keep the left div away. overflow:hidden is used a cheap and cheerful clearfix.
best way I can figure doing it is with absolute positioning:
div#TextB{
position:absolute;
right:10px;
top:10px;
}
div#master{
margin-right:120px;
}
http://jsfiddle.net/Vnxr7/1
There is one very ugly solution:
Set the overflow of the outer div to hidden, take the div out of the dom using position:relative, setting the left to -100px and the width to 100%.
You have to play around with the display, position and left/top etc. or get back with some more details so one could know what you want to achieve.
what about this ?
div {
background:green;
margin-right:100px;
}
#TextB{
width:100px;
background:red;
float:right;
margin:0px;
}
Updated version
Just give the outer div a padding of 50px on both left and right side
EDIT
Place this where u want to put the gap:
<div width="100px" height="1em"> <div>