i want to create an html page ,where on the left top side will be an image (400x200) ,exact below the image a rectangle div(same width with image and height 50px) and exact on the right of the image another rectangle as a button(same height with image an width 50px) .
On the right size of the page i want 3 smaller rectangle divs as buttons(100x50) (one next to the other).
How can i achieve this? .I thought of creating two containers and put the image and the 2 divs to the one on the left and the rest 3 divs to the right.
However something is missing, especially if the resolution is lower or i adjust the window the arrangement is awful .Which approach is better when the resolution is smaller. The position should be for the left container absolute?Thanks in advance.
I 've created this
#container1 {width:50%;height:300px;float:left;margin-left:30px;margin-top:20px;}
#container1 a{ text-decoration:none;}
#container2 {width:40%;height:300px;float:right;margin-left:50px;margin-top:50px;}
#container2 a{ text-decoration:none;}
#col1 { float:left; margin:5px;font-size:14pt; border:1px;width:400px;height:200px;border-radius:5px;}
.col2 { float:left;background-color:rgb(17, 83, 151); margin:10px; border:1px ;margin-top:75px;width:155px;height:70px;}
#col3 { position:relative;float:left;background-color:rgb(17, 83, 151); margin:5px;margin-right:5px;font-size:14pt; border:1px ;width:110px;height:200px;border-radius:5px;}
.int {text-align:center;border 1px;font-family:segoe UI;font-size:14pt;color:white;padding-top:5px;margin:15px;}
.int2 {text-align:center;border 1px;font-family:segoe ui;font-size:14pt; color:white;padding-top:50px;margin:3px;}
#col4 {position:absolute;float:left;clear:both;background-color:rgb(17, 83, 151); margin:5px;font-size:14pt; border:1px ;width:400px;height:80px;border-radius:5px;}
.button {padding-top:30px; padding-left:10px; color:white; font-size:10pt; font-family:Segoe UI; text-decoration:none;}
<div id="container1">
<div id="col1" class="col">
<img id="img" src="http://ima.gs/transparent/400x200.png"">
</div>
<div id="col3">
<div class="int2">button 1</div>
</div>
<div id="col4">
<div class="int">button 2 </div>
</div>
</div>
<div id="container2">
<div class="col2"><div class="button">button 3</div>
</div>
<div class="col2"><div class="button" style="padding-top:30px;">button 4</div>
</div>
<div class="col2"><div class="button" style="padding-top:30px;">button5</div>
</div>
</div>
The first thing I'm noticing is that you're floating elements and using margins. Switch to padding and this will make your life much easier as far as width calculations goes:
#container1 {width:50%;height:300px;float:left;padding-left:30px;margin-top:20px;}
#container2 {width:50%;height:300px;float:right;padding-left:50px;margin-top:50px;}
As long as border-box is being used in your css, padding eats up the inside of containers instead of adding it to the outside. Basically your containers were 50% + 30px margin. I changed it to 50% width with an inset 30px padding. Now you can do easy math instead of accounting for a margin.
Related
I would like to have two divs inside a container fit vertically to fill the parent container, without overflowing from the bottom.
<div class="modal-body">
<div class="parent-container">
<div class="div1" style="height:auto;width:100%;">
<span style="width:100%;">
<div class="td-div">Header Test 1</div>
<div class="td-div">Header Test 12</div>
<div class="td-div">Header Test 1 3</div>
<div class="td-div">Header Test 14</div>
<div class="td-div">Header Test 15</div>
</span>
</div>
<div class="div2" style="width:100%;overflow-y:auto;">
<div class="blue-row" style= "width:100%;">
<span style="width:100%;display:inline-block">
<div class="td-div">TEst1 testing seeing what happens when its long</div>
<div class="td-div">Test2</div>
<div class="td-div">Test 3 3</div>
<div class="td-div">Test 4</div>
<div class="td-div">T e s t 5</div>
</span>
</div>
<div class="blue-row" style="width:100%;">
<span style="width:100%;display:inline-block">
<div class="td-div">TEst1 testing seeing what happens when its long</div>
<div class="td-div">Test2</div>
<div class="td-div">Test 3 3</div>
<div class="td-div">Test 4</div>
<div class="td-div">T e s t 5</div>
</span>
</div>
</div>
</div>
</div>
The link below is the actual problem that I'm having , with a bit more CSS to make it easier to distinguish.
http://jsfiddle.net/8sdLe2pu/12/
The problem is that the div with class "div2" is overflowing out the bottom of the parent container. It should fill any space left in the container (the space that the header doesn't take up) and should have a scrollbar to be able to view the rest of the contents.
I would like it to look like this example below, except it should vertically fill it's container, and should NOT use a hard-coded percent on the div with class "div2".
http://jsfiddle.net/8sdLe2pu/10/
It should look similar to this above, except there should be NO red space below the div with the scrollbar (div2). It should automatically fill the parent container without overflowing.
So, my question is, would it be possible to make a child div have a scrollbar like in the JSFiddle example number 10, while at the same time having it fill the parent without overflowing, and without using a hard-coded % height.
I do not want to use a hard-coded % height, because it should be able to always fill the parent container regardless of screen size, and the parent container uses vh for it's height.
Here is my solution using flexbox.
*{
box-sizing:border-box;
}
.modal-body{
height:65vh;
background:red;
}
.parent-container{
width:100%; height:100%;
display:flex;
align-items:stretch;
flex-direction:column;
}
.div1{
background:green;
}
.div2{
flex:1;
background:blue;
}
.div1 span{
display:table;
}
.div1 span div{
display:table-cell;
width:20%;
padding:1em;
vertical-align:middle;
}
div.blue-row span{
display:table;
width:100%;
}
div.blue-row span div{
display:table-cell;
width:20%;
padding:1em;
vertical-align:middle;
}
And working demo can be found here http://jsfiddle.net/pulamc/x8xw2hLg/
I used a bit of javascript to pull the height of your containing div out of the DOM and apply it to the .div2 class. also instead of a % height on div1 I used its current pixel height which is 75px.
basically subtract 75px ( or whatever height you end up with for the portion above your table ) from the total height of the containing div and put that in as the css height of the .div2
With this method the height will be calculated each time the page loads so it should always fit within the element instead of being hardcoded.
::Fiddle::
https://jsfiddle.net/8sdLe2pu/38/
::Code::
::JS:: --> used jQuery
var $modalBody = $( '.modal-body' ),
modalHeight = $modalBody.height(),
$div2 = $( '.div2' ),
div2Height = $div2.css( 'height' );
$div2.css({
height: modalHeight - 75
});
$( window ).resize(function(){
if ( div2Height !== modalHeight - 75 ){
$div2.css({
height: modalHeight - 75
});
}
});
::CSS::
.modal-body {
height:65vh;
background: red;
}
.td-div {
width:19%;
display:inline-block;
}
.div2 {
}
::HTML:: --> only made this one adjustment
<div class="div1" style="height:75px;width:100%;">
I want to create html page the next vision. Location of divs 1,2 and 3 in one line was done, but with 4th div I have some troubles and can't make it.
You really should post your code to see whats wrong with it.. But i made the example for you.
Here you go, you could use float.
Html Code:
<div id="wrapper">
<div id="first">
</div>
<div id="second">
</div>
<div id="third">
</div>
<div id="fourth">
</div>
</div>
Css Code:
#wrapper{width:300px; margin:0;}
#first { height:300px; width:100px; background:black; float:left;}
#second{ height:250px; width:100px; background:red;float:left;}
#third{ height:250px; width:100px; background:green;float:left;}
#fourth{ height:50px; width:200px; background:blue;float:left;}
Working DEMO
Here's an example that uses non-fixed heights and widths. The key is wrapping the subsections in divs as well and styling accordingly. div is short for division after all.
<div class="left">
1
</div>
<div class="right">
<div class="second-third-wrapper">
<div class="second">
2
</div>
<div class="third">
3
</div>
</div>
<div class="fourth">
4
</div>
</div>
http://jsfiddle.net/Pb5NX/2/
The divs then use percentage height and widths to size them properly. These percentages take up a percentage of the parent element (the <body>, which then inherits from the <html>), so the parents height needs to be set as well.
body, html {
width: 100%;
height: 100%;
}
.left {
background-color: blue;
width: 50%;
height: 100%;
float: left;
}
If you want them a fixed size, you can just set a specific height and width style on the specific elements and the percentages will do the rest.
I am trying to creat a layout like this:
My question is specifically centered around the five boxes. I struggle with the CSS to get it to work. Have you guys got a simple setup for such a layout?
I see that you have fixed width, so here is an example. Widths are not exact for your width, but you can esily set values you need. Main thing here is float:left in small_bottom class which makes div to be shown in one row. overflow:hidden in bottom class makes that div wrap around floating divs (without that it will be shown like there is nothing inside). If you want this depend on browser window width - try using percents in width for small_bottom.
HTML:
<div class="main">
<div class="top"></div>
<div class="bottom">
<div class="small_bottom"></div>
<div class="small_bottom"></div>
<div class="small_bottom"></div>
<div class="small_bottom"></div>
<div class="small_bottom"></div>
</div>
</div>
CSS:
div{border:solid 1px;}
.main{width:350px; border:solid 1px;}
.top{ height:40px;margin:5px;}
.small_bottom{
float:left;
height:50px;
width:50px;
margin:5px;
}
.bottom{margin:5px; overflow:hidden;}
Here is an example how it looks
Im trying to achieve a design that has five columns with fluid width, but also incorporates separator divs (with background images so they're a fixed size). There has to be a way to get these columns + the separators to equal 100% width so then I can have the footer expand and contract with the content correctly.
I've looked at code for a fixed div floated against a fluid div, but can't seem to expand the idea of negative margins to 5 fluid columns with 6 fixed separator divs.
Here's what I have..
<div class="content">
<div id="column-container">
<div class="sep"></div>
<div class="col_one"></div>
<div class="sep1"></div>
<div class="col_two"></div>
<div class="sep2"></div>
<div class="col_three"></div>
<div class="sep3"></div>
<div class="col_four"></div>
<div class="sep4"></div>
<div class="col_five"></div>
<div class="sep5"></div>
</div>
<div class="footer">
</div>
</div>
CSS is something like
.sep{
width:26px;
position:relative;
margin-top:-20px;
height:1113px;
float:left;
background-image:url('images/sep.png');
} // other sep divs are the same just using a different sep background
#column-container .col_one,#column-container .col_two,
#column-container .col_three,#column-container .col_four,
#column-container .col_five{
height:1090px;
overflow:hidden;
margin: 0 auto;
width: 16.8%;
float: left;
}
#content{
min-width:975px;
width:80%;
margin: 0 auto;
}
Option #1: Spend the rest of the week trying to figure out how to do this in javascript and never be completely satisfied with the result.
Option #2: Change the html structure a little.
<style type="text/css">
#main_container {
background-image:url('images/sep.png');
background-repeat:repeat-y;
padding-left:26px;
overflow:hidden;
}
.column {
width:20%;
float:left;
background-image:url('images/sep.png');
background-repeat:repeat-y;
background-position:top right;
} .column_padder {
padding:4px 30px 4px 4px;
}
</style>
<div id="main_container">
<div class="column"><div class="column_padder">Lorem ipsum de color sit amet. Consectatur adipising elit.</div></div>
<div class="column"><div class="column_padder">Cut back on those dirty cheeseburgers, Randy!</div></div>
<div class="column"><div class="column_padder">asdf</div></div>
<div class="column"><div class="column_padder">asdf</div></div>
<div class="column"><div class="column_padder">asdf</div></div>
</div>
display:table, display:table-row and display:table-cell work really well here. If you want to make sure that it's "backwards-compatible" with older browsers you could take a look at the Holy Grail Layout and expand on that.
I'm creating a site that has a series of four images on the homepage used as navigation with a large image beneath.
<div style="width: 696px">
<div class="imglink"></div>
<div class="imglink"></div>
<div class="imglink"></div>
<div class="imglink"></div>
</div>
<div style="width:696px">
...
</div>
The "imglink" divs are 160px wide.
I would like the images in the top div to be horizontally spaced evenly inside the div, with the two outer divs flush with the edges of the image below. I've been trying out floats, margins, padding, etc for a couple hours now and can't figure it out.
Thanks for your help!
I would make the first and last divs distinct.
<div class="imglink_first"></div>
<div class="imglink"></div>
<div class="imglink"></div>
<div class="imglink_last"></div>
Then your css could apply margin only to imglink.
Your total padding would be 696px - 4*160px = 696px - 640px = 56px. There are three padding regions, so each should be 56px/3 = 18.67px. Unfortunately this is not an integer, so you need to round. 18px * 3 = 54px leaving two extra pixels at the end of your div. Also, you will need 18px/2 = 9px per left and right side.
.imglink_first, .imglink, .imglink_last{
float: left;
}
.imglink{
margin: 0px 9px;
}
Alternatively, you could use CSS selectors with :first-child and :last-child
<div class="image-row" style="width: 696px">
<div class="imglink"></div>
<div class="imglink"></div>
<div class="imglink"></div>
<div class="imglink"></div>
</div>
.imglink{
float: left;
margin: 0px 9px;
}
.image-row:first-child, .image-row:last-child{
margin: 0px;
}
Though this is not supported in all browsers.
Here's a jumping off point for you. http://jsfiddle.net/gqf5h/1/
If you know the number of menu items, wrap each one in a div. Then set your menu div widths to a percentage of the width and set text-align center. ie
for 4 menu options :
css
#menu div{
width:25%;
text-align:center;
display:inline-block;
}
html
<div id='menu'>
<div><a href='#'>link</a></div>
<div><a href='#'>link</a></div>
<div><a href='#'>link</a></div>
<div><a href='#'>link</a></div>
</div>