Divs: Equal Horizontal Spacing - html

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>

Related

Fixed Div's stretching over entire screen, need each to occupy % of horizontal space

I have 3 main div's that should split the screen horizontally (45%,10%,and 45% of width of screen). The left-most div(blue) contains a number of smaller divs(aqua) that need to remain static. The middle (green) and right-most (red) div should float down the page as the user scrolls, but should remain in their horizontal positions. I have set fixed heights for all div's as they will be kept to a certain vertical size.
I tried assigning fixed positions for the green and red div's but they move out of position and block the blue div's.
CSS
.PNMLB {
height: 400px;
font-style:italic;
overflow-y:scroll;
background-color:aqua;
border-style:double;}
HTML
<div class="MatchingDiv" style="width:100%">
<div class="PNMListBoxes" style="width:45%; float:left;background-color:blue;">
Left-most Div
<!--generate programmatically?-->
<div class="PNMLB" id="rank1">Rank 1<br/></div>
<br/>
<div class="PNMLB" id="rank2">Rank 2<br/></div>
<br/>
<div class="PNMLB" id="rank3">Rank 3<br/></div>
<br/>
<div class="PNMLB" id="rank4">Rank 4<br/></div>
<br/>
</div>
<div class="Middle Div" style="width:10%;height:50px;float:left; background-color:lime;">Center Div</div>
<div class="right div" style="overflow-y:scroll;height:400px;width:45%;float:right; background-color:red;">Right-most Div</div>
Please use the style position:fixed;right:0%; for right most div and position:fixed;right:45%; for center div
The working code snippet is given below:
<style>.PNMLB {
height: 400px;
font-style:italic;
overflow-y:scroll;
background-color:aqua;
border-style:double;}
</style>
<div class="MatchingDiv" style="width:100%">
<div class="PNMListBoxes" style="width:45%; float:left;background-color:blue;">
Left-most Div
<!--generate programmatically?-->
<div class="PNMLB" id="rank1">Rank 1<br/></div>
<br/>
<div class="PNMLB" id="rank2">Rank 2<br/></div>
<br/>
<div class="PNMLB" id="rank3">Rank 3<br/></div>
<br/>
<div class="PNMLB" id="rank4">Rank 4<br/></div>
<br/>
</div>
<div class="Middle Div" style="width:10%;height:50px;float:left; background-color:lime;position:fixed;right:45%;">Center Div</div>
<div class="right div" style="overflow-y:scroll;height:400px;width:45%;float:right; background-color:red;position:fixed;right:0%">Right-most Div</div>
if you know the exact width of all divs, you can move them right after another by using CSS property left
.Middle, .right{
position: fixed;
}
.Middle{
left: 45%;
}
.right{
left: 55%;
}
I am personally using jQuery for this, you can get offset of element and position divs more precisely :)
So I made a JSFiddle for the code you provided above.
I removed all the float: left;'s from the two divs that we're supposed to be fixed and I added position: fixed; top: 0; to both of them.
Since that would overlap them all on the left, I move the red middle one left: 45% and the blue one right: 0;.
I figured that's the functionality you were looking for.
Let me know if you have any questions
https://jsfiddle.net/deubwma6/6/

Vertical aligning the div in div that was using margin-auto

I have this jsfiddle: Sample
As you can see 2 divs are align together side by side, what I want is to vertically aligning them. Also I want to be able to add another div to float to the right which is also vertical aligned.
How can I able to aligned them without using absolute positioning?
<div style="background-color: blue; ">
<!-- Global Header -->
<div class="header">
<div class="floatLeft">
WritePub
</div>
<div id="pcontainer" class="inner-header-search floatLeft">
<input type="text"/>
</div>
</div>
</div>
Your fiddle is too noisy. If you want to vertical align the contents of a div without touching its height you can add "display: table-cell" to the div to simulate a table row column which gives you alignment.
http://jsfiddle.net/5peh12th/2/
<div class="container">
Hello: <input type="text-box"/>
</div>
.container {
display: table-cell;
width: 800px;
background-color: red;
height: 50px;
vertical-align: middle;
}
or you can just not give the div a height and give top and bottom padding of equal numbers

Divs arrangement

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.

Behaviour of divs next to eachother

I have some divs which don't behave like I wish.
<div class="list-product-with-border">
<div style="width:80px; display:inline-block;">img</div>
<div style="display:inline-block;"><b>Productname</b></div>
<div style="float:right; width:80px;">
<div>
<button id="editBtn">Edit</button>
</div>
<div>
<button id="removeBtn">Remove</button>
</div>
</div>
</div>
JSFiddle link
Two problems here:
the bordered divs is not high enough: the 'remove' button is not visually in the bordered div
When the 'product name' is longer, the buttons are rendered under the div with the product name. I would like the product name to be over multiple lines when this happens. The three divs should always be next to eachother.
The first and last div has a fixed width, the middle div (product name) should stretch with the size of the bordered div
Personally I'd use a table for this. Each row of the table is an item, and you have a column of images, a column of names, and a column of actions. Is this any different to the tables used for invoices?
I can't quite get the effect you want, but improvements can be made: a floated element should come before the elements that are to go around it - so in this case, it should be the first thing inside the list-product-with-border container. Also, you should either have an element with clear:both at the end of the container, or set the container to have overflow:hidden to force the floated element to be inside.
Do you want it like this?
Here's the Fiddle
<style>
.list-product-with-border {
padding:3px;
width:60%;
border:1px solid black;
overflow: hidden;
height: auto;
}
</style>
And now the HTML
<div class="list-product-with-border">
<div style="width:80px; display:inline-block;">img</div>
<div style="display:inline-block; overflow:hidden; height: auto;"><b>Productname Is the right choice baby, as you can see its just done</b></div>
<div style="float:right; width:180px;margin-top: 10px;">
<div style="float: left;">
<button id="editBtn">Edit</button>
</div>
<div style="float: left;">
<button id="removeBtn">Remove</button>
</div>
</div>
</div>
</div>
You must use display:table-cell instead of display:table-column and remove float:left for .divCell.
And add this style:
.headRow{
display:table-row;
}

Arranging divs so that there is a margin inbetween

In the html below I want the third div so that it is in the same row as the first two but with a 100px gap inbetween. The code displays the first two divs adjacent which is what i want but then the third div is displayed underneath the first two. Changing the style of the first two divs to something other than float left messes up the rest of the page.
Any ideas?
<div class="maintitle">
<div style="float: left;">
</div>
<div style="float: left;">
</div>
<div style="float: left; margin-left: 100px;">
</div>
</div>
Change all the float: left; declarations to display: inline-block; and you should be good to go.