I am playing with DIVs and want to know best method on how to achieve something.
I want to get following result:
------------------------------|
| DIV 1 |
------------------------------|
| DIV 2 | | DIV 3||
--------- --------|
| << Far right of web page
Basically want DIV 1 to appear on right hand side of the page.
Under it want some small images to appear in certain positions along the bottom of DIV 1 (maybe even so close might have to go slightly behind DIV 1)
Problem I am getting is either:
1. The images appear in same line after DIV 1
2. Can get DIV 2 in right position but DIV 3 then appears underneath DIV 2, not on same line as it
What's the best method to achieve this?
http://jsfiddle.net/A5tP2/ Not sure if this is what you were looking for, but without any code I can't really help you on what you do have. But yeah.
HTML
<div id="wrapper">
<div id="oneWrap">
<div id="one">
</div>
</div>
<div class="image">
image
</div>
<div class="image">
image
</div>
</div>
CSS
#wrapper{
width: 500px;
height: 500px;
background: blue;
}
#oneWrap{
width: 500px;
height: 100px;
}
#one{
width: 300px;
height: 100px;
background: orange;
float: right;
}
.image{
margin-top: 20px;
margin-left: 50px;
width: 100px;
height: 100px;
background: purple;
float: right;
color: white;
}
Put the smaller divs inside of another div to be able to position them more precisely:
<head>
<style>
#div1{
float:right;
}
#div-helper{
clear:both;
}
#div2{
float:left;
}
#div3{
float:right;
}
</style>
</head>
<body>
<div id="div1">1</div>
<div id="div-helper">
<div id="div2">2</div>
<div id="div3">3</div>
</div>
</body>
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 1 year ago.
I have the following html:
<div id="box">
<div class="test1">
test1
</div>
<div class="test2">
test2
</div>
</div>
Now i want to align the div with class test1 in the center of the parent (id="box") (on main axis) and align test2 on the right of the parent. Can anyone tell me if this is possible with flex or do i need something else? The html is fixed and it can't be changed. i want to solve it with this structure.
here is a js fiddle that solves it but i need to add a 3rd div inside the parent: http://jsfiddle.net/kp1tzcry/54/
This is not what i want. Also i realy want to solve it with flex. i know i can use margin auto and float right (don't want to do that if not needed)
You can acheive this using display:block and senting position parent to relative
Here is an exemple
#box {
display: block;
position:relative;
background-color: lightgrey;
}
.test {
background-color: cornflowerblue;
width: 60px;
min-height: 100px;
}
.test1 {
margin:auto;
}
.test2 {
position: absolute;
top: 0;
bottom:0;
right: 0;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="box">
<div class="test test1">
test1
</div>
<div class="test test2">
test2
</div>
</div>
</body>
<!-- Mirrored from www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_align-self by HTTrack Website Copier/3.x [XR&CO'2014], Sun, 13 Mar 2016 11:03:00 GMT -->
</html>
Adding align-items: center to your #box will solve your issue, however, your current structure may cause issues in responsive screens.
#box {
background: #000;
color: #fff;
height: 100px;
cursor: pointer;
}
#box div {
width: 50%;
float: left;
text-align: right;
}
<div id="box">
<div class="test1">
test
</div>
<div class="test2">
test2
</div>
</div>
Edit: Use width: 50% along with float: left
Now I can just put the ABC div to the right but below Body div. How do I put ABC div below Header div? Overlapping is needed.
<div style="width:500px;margin:0 auto;">
<div style="background-color:yellow;height:100px">Header</div>
<div style="background-color:aquamarine; height: 400px">Body</div>
<div style="background-color:red;width:100px;margin-left:auto">ABC</div>
</div>
I have added 2 answers. 1st is for external stylesheet , 2nd is for inline styling (just like how you wrote your code).
Firstly, don't use inline styling. If possible, always use external stylesheet.
Now, for your question, use relative position for the parent and absolute for the child. In this case, parent is your main container and child is that ABC div.
Try this:
#container {
width: 500px;
margin: 0 auto;
position: relative;
}
.header {
background-color:yellow;
height:100px
}
.body {
background-color:aquamarine;
height: 400px;
}
.abc {
background-color:red;
width:100px;
position: absolute;
top: 100px;
right: 0;
}
<div id="container">
<div class="header">Header</div>
<div class="body">Body</div>
<div class="abc">ABC</div>
</div>
Explanation:
Since your .header is 100px, you can set the .abc to top: 100px; and set the right: 0 to move it to the extreme right within the parent since .abc is absolutely positioned to its parent.
If you are only allowed to use inline-styling, then try this:
<div style="width:500px;margin:0 auto;position:relative;">
<div style="background-color:yellow;height:100px">Header</div>
<div style="background-color:aquamarine; height: 400px">Body</div>
<div style="background-color:red;width:100px;position:absolute;top:100px;right:0;">ABC</div>
</div>
I added float: right to place the ABC div on the BODY div (overlap) and interchanged the position of the div BODY and ABC
<div style="width:500px;margin:0 auto;">
<div style="background-color:yellow;height:100px">Header</div>
<div style="background-color:red;width:100px;float: right;">ABC</div>
<div style="background-color:aquamarine; height: 400px">Body</div>
</div>
go to https://www.w3schools.com/css/css_positioning.asp for more information
To make layout you can use flexbox utilities. It's the most common and probably the easiest way to make layout.
I hope this is what you need.
For more infos check DOCS
*,
*::before,
*::after {
box-sizing: border-box;
}
.container-fluid{
width:100%;
}
header{
width:100%;
height:100px;
background:yellow
}
.row{
display:flex;
flex-wrap:wrap;
}
.col-left{
width:100%;
flex:0 0 75%;
max-width:75%;
background:blue;
height:100px
}
.col-right{
width:100%;
flex:0 0 25%;
max-width:25%;
background:red;
}
<div class="container-fluid">
<header></header>
<div class="row">
<div class="col-left"></div>
<div class="col-right"></div>
</div>
</div>
Excuse the title of the post - I am at a loss on how to describe the design problem I am attempting to implement... (which is likely stopping me from finding an appropriate solution).
I have a wireframe/comp that came from my designer:
Which, in terms of a grid, looks something like this:
Now... the obvious problem is how do I make certain content span two rows or columns of a grid or table ? B/C the way I read this, either the squarish logo on the left or the 'coming soon' text on the top needs to span across two fields...
Is this even possible ?
Any help appreciated.
My solution would be to make each of the three sections a container using a div.
You can then position the elements as desired with adjustable margins and padding.
.container{
background: #333;
padding:10px;
color:white;
height:auto;
width:500px;
display:inline-block;
}
.icon{
float:left;
padding:5px;
height:30px;
width:30px;
background-color:green;
display:inline-block;
margin-right:10px;
}
<div class="container">
<div class="icon">
</div>
<div class="coming-soon">
COMING SOON TO MOBILE
</div>
<div class="downloads">
<button>
Apple
</button>
<button>
Android
</button>
</div>
</div>
If needed, you can target the coming-soon and downloads classes for more customization.
There are a number of solutions to this. Here's one using float:left and nested divs.
div {
float: left;
}
#group {
width: 200px;
height: 100px;
}
#one {
width: 100px;
height: 100px;
background-color: red;
}
#two {
width: 200px;
height: 30%;
background-color: green;
}
#three {
width: 200px;
height: 70%;
background-color: blue;
}
#four {
width: 100px;
height: 100px;
background-color: red;
}
<div id="one">
</div>
<div id="group">
<div id="two">
</div>
<div id="three">
</div>
</div>
<div id="four">
</div>
A much simpler layout would be to go.
HTML
<div class="wrapper">
<img style="float: left" src="your img" alt="whatevs"/>
<ul style="float:left">
<li><b>COMING SOON TO MOBILE</b></li>
<li><img src="1" alt="inline-block"/><img src="2" alt="inline-block"/></li>
</ul>
</div>
Simple CSS
.wrapper ul li img {
display: inline-block;
width: 50%;
height: auto;
}
The fact here is, the code is simplified, the layout is easy to read, its less divs, and far more less complicated. But, truth be, theres a 100 ways to do this so find the method that fits your size shoe best.
I've been on this for days and read every conceivable article on css, overflow, and layout.
I have a page with a banner (position: absolute), below which is a div containing two block divs. The second block div, in turn has another div containing text.
I would like the inner-most DIV display a scroll bar when the window is resized.
I've read the posting on ensuring height is set on all containing elements, I've set overflow-y: auto in all the right places. Just doesn't work.
The containing DIV looks like this: http://i.imgur.com/oDHM4.png
I want the green part to scroll when the browser window is resized (y-direction only).
Scrollable DIVs in any design are so useful... but shouldn't be this hard.
Any and all help appreciated.
Danny
MARKUP
The markup is very simple:
<body>
<div id="page-header" style='background:blue;'>page-header</div>
<div id="page-content">
<div id="configContent" style='height: inherit; background: steelblue;'>
<h1 id='panTitle'>Panel Title</h1>
<div id='panProbes' class='libPanel' style="background: maroon;">
<p>panProbes</p>
<div id="probesCT1" class="configtable" style='background: red;'>
<p class='pTblTitle'>probesCT1</p>
</div>
<div id="probesCT2" class="configtable" style='background: grey;'>
<p>probesCT2</p>
<div id='pTbl' style='background: green;'>
<div class='pRow'>1st para in pTbl</div>
<div class='pRow'>some data</div>
<div class='pRow'>some data</div>
<div class='pRow'>some data</div>
<div class='pRow'>some data</div>
<div class='pRow'>some data</div>
<div class='pRow'>some data</div>
<div class='pRow'>some data</div>
<div class='pRow'>some more data</div>
<div class='pRow'>some more data</div>
</div>
</div>
</div>
</div>
</div>
</body>
** STYLING **
Here's the CSS cut down to the core essence:
html, body {
position:absolute;
margin: 0px;
padding: 0px;
height: 100%;
width: 1010px;
overflow: hidden;
}
#page-header {
position: absolute;
left: 5px;
top: 5px;
height: 60px;
width: 100%;
}
#page-content {
width: 100%;
height: 100%;
margin-top: 95px;
}
#configContent {
height: 100%;
width: 300px;
padding-left: 0px;
border-width: 3px;
margin-left: 30px;
margin-right: auto;
}
.libPanel { height: 100%; }
#probesCT1 { width: 150px; margin: 0 auto 0 30px; }
#probesCT2 {
width: 200px;
/* height: 100%; */
margin: 0 30px 50px 30px;
padding: 0 10px 10px 10px;
}
#pTbl { overflow-y: auto; }
.pRow { margin-bottom: 10px; }
For overflow-y: auto to work and make scroll bars, that div must have a specific height set. So in this example (with your html above) I set it to 200px, which was less space than necessary to display the content without a scroll bar, and thus shows a scroll bar. However, if set to 100% it does not work, because 1) you need to uncomment the height of the containing divs, and 2) your content in that div is less than needed to fill the height of the div, so no scroll bar shows up. With more content added, you get a scroll bar.
What I think you really want is to insure you always have a scroll bar if needed, but even then, you need to make sure the div does not extend below the bottom of the page or you could still have problems with the scroll bar itself going off the page. I've configured something that is probably more what your intent is, but note that I had to use multiple nested relative or absolute elements to achieve the effect. I also had to guess on some height positioning for the top of elements to clear your titles.
Is there an elegant way to align 3 elements left, center, and right on the same line?
Right now I'm using 3 <div>'s all with width:33%;float:left; and it's not working too well.
that works for me:
<html>
<head>
<style>
div.fl {
float: left;
width: 33%;
}
div.fr {
float: right;
width: 33%;
}
</style>
</head>
<body>
<div class="fl">
A
</div>
<div class="fl">
B
</div>
<div class="fr">
C
</div>
</body>
</html>
do you mean the same?
You may get strange results if there is any margin in the element you are adding it to. This is where width: 33% may not work because you will need to factor in the amount of margin that element has.
<html>
<head>
<title></title>
<style type="text/css">
div { float: left; width: 33%; margin: 4px; }
</style>
</head>
<body>
<div style="border: 1px solid #ff0000;">1</div>
<div style="border: 1px solid #00ff00;">2</div>
<div style="border: 1px solid #0000ff;">3</div>
</body>
</html>
This will cause it not work as expected because of the margin added to each div. Similarly, if you add too much of a border to each div you will get a similar result border: 5px solid !important;
As soon as you take away the margin from the above code, it should work as expected.
Try this:
<div style="float: left; width: 100px;">
left
</div>
<div style="float: right; width: 100px;">
right
</div>
<div style="width: 100px; margin: 0 auto;">
center
</div>
You need to take into account that the left and right divs do not push the container box (a div around the code above) height down, even if they have more content than the center div, the only one not floated. A clearfix will take care of this.
I created a page with all three methods for comparison at http://www.salestime.com/Ref/LeftCenterRight.html.
Float the first two left and float the third one right, while ensuring the widths will fit the line you are placing them on.
Use pixel widths if your design allows for it.
Float LeftBlock 'left', CenterBlock 'none' and RightBlock 'right'. But make sure the Center element appears last on your HTML page, otherwise it wont work.
Here is yet another varition of the theme:-
<html>
<head>
<style type="text/css">
div div {border:1px solid black}
div.Center {width:34%; float:left; text-align:center}
div.Left {float:left; width:33%; text-align:left}
div.Right {float:right; width:33%; text-align:right}
</style>
</head>
<body>
<div class="Left"><div>Left</div></div><div class="Center"><div>Center</div></div><div class="Right"><div>Right</div></div>
</body>
</html>
Note that the border is possible by using an inner div for each of the 'panel' divs. Also gives the center the remain 1% of pixels.
This works for me. I don't know if it's the most elegant, but it does do the work: it reacts well to the "cell" contents and resizing.
<html>
<head>
<style>
.a {
border: 1px dotted grey;
padding: 2px;
margin: 2px;
}
.l {
border: 1px solid red;
background-color: #fee;
float:left;
}
.c {
border: 1px solid green;
background-color: #efe;
text-align:center;
}
.r {
border: 1px solid blue;
background-color: #eef;
float:right;
}
</style>
</head>
<body>
<div class="a">
<div class="l">
</div>
<div class="r">
toto v.2 adfsdfasdfa sdfa dfas asdf
</div>
<div class="c">
item 1 | tiem 2 | asdf 3 | asdfad asd | aasdfadfadfads
</div>
</div>
</body>
</html>