On my page, I need to display 10 boxes across it horizontally. Each box has a min-width of 150px and a max-width of 299px. The page should fit as many boxes as it can across the page without leaving any gaps, with each box having the same width (extending a pixel if needed due to rounding).
Example: If the width of the page is 660px, 4 boxes at 165px width should be used.
If the width of the page is 600px, 4 boxes at 150px width should be used.
If the width is 597px, 3 boxes at 199px should be used, since a box cannot go under 150px.
The remaining boxes on the bottom should have the same width of the ones above.
How can I accomplish the above?
I have a fiddle here: http://jsfiddle.net/CD4f2/1/
Note how the rows of boxes leave a gap to the right.
using the follow code (because I'm forced to)
<body>
<div id="mainPage">
<div id="bar">Width of a row of boxes should match the length of this bar.</div>
<div id="capTable">
<div class="cap" id="cap0">
<img class="capImage">
<input type="text">
</div>
<div class="cap">
<img class="capImage">
<input type="text">
</div>
<div class="cap" id="cap2">
<img class="capImage">
<input type="text">
</div>
<div class="cap">
<img class="capImage">
<input type="text">
</div>
<div class="cap" id="cap4">
<img class="capImage">
<input type="text">
</div>
<div class="cap">
<img class="capImage">
<input type="text">
</div>
<div class="cap" id="cap6">
<img class="capImage">
<input type="text">
</div>
<div class="cap">
<img class="capImage">
<input type="text">
</div>
<div class="cap" id="cap8">
<img class="capImage">
<input type="text">
</div>
<div class="cap">
<img class="capImage">
<input type="text">
</div>
</div>
</div>
body
{
background-color:black;
}
.cap
{
background-color: red;
float: left;
height: 150px;
max-width: 299px;
min-width: 150px;
}
.capImage
{
background-color:blue;
float: left;
height: 37px;
width: 37px;
}
#bar
{
background-color: orange;
}
#cap0, #cap2, #cap4, #cap6, #cap8
{
background-color: green;
}
#mainPage
{
margin: 0 auto;
max-width: 800px;
min-width: 150px;
}
I've tried this with tables also but ran into the same problems, as well as many different combination of floats, and displays, and overflows.
I believe I might be able to do this by manually specifying different resolutions in the CSS. But A more automatic approach would be preferred if possible.
I only want to use javascript as a last resort. Which I should be able to do myself.
Thanks.
I have changes your .cap divs to use % widths instead of px to make it easier to get a responsive layout.
DEMO
Main CSS Change
.cap
{
background-color: red;
float: left;
height: 150px;
width: 25%;
min-width: 150px;
}
#media only screen and (max-width: 1024px) {
.cap {
width: 50%;
}
}
Related
For a school project a need to make a website. I have a contact form page and to the right I want three images. See picture for how it looks now. The images float under the form and not on the right of it. Here is some html and css code:
#contact-img1,
#contact-img2,
#contact-img3 {
width: 20%;
height: auto;
float: right;
}
#contactform {
width: 70%;
height: 500px;
float: left;
}
.shoes {
float: right;
}
<fieldset id="contactform">
<legend>If you have a question you can ask it here:</legend>
<p> <label for="name">Name:</label> </p>
<input type="text" name="name">
<p> <label for="email">Email:</label> </p>
<input type="text" value="placeholder#gmail.com" name="email">
<p> <label for="message">Message:</label> </p>
<input type="text" name="message">
<p>
<form action="contact.html">
</p>
<input type="submit" value="send question!" />
</form>
</fieldset>
<section class="shoes">
<aside class="img-inno1">
<img id="contact-img1" src="images/inno-img1.webp" alt="first sport image">
</aside>
<aside class="img-inno2">
<img id="contact-img2" src="images/inno-img2.webp" alt="second sport image">
</aside>
<aside class="img-inno3">
<img id="contact-img3" src="images/inno-img3.webp" alt="third sport image">
</aside>
</section>
Floating an element allows content that follows it to bubble up beside it.
It does not cause the floated element to bubble up beside content before it.
To get the form next to the images using floats you would need to either:
Change the source order
Float the form instead of the images
That said. The point of float is to achieve this sort of effect (as shown in the CSS specification):
Using them to make blocks of content site beside each other is a hack.
We have Flexbox for that type of layout now.
Try this
.shoes {
float:right;
width:20%;
}
.shoes aside {
display: inline-block:
}
.shoes img {
max-width: 100%;
}
I am having trouble to make container to take certain width using percentage value. When using max-width to certain % it is overflowing out of the window. If i use fixed width it's working as expected.
As i want make it responsive i want to use % value. How can i achieve the result?
HTML:
<div class="select-address">
<div class="address-radio-container radio-element-container">
<div class="address-radio">
<div class="address-radio-element radio-element">
<input id="address-tmirddv" name="address" type="radio" class="radio-input" value="cash">
<div class="radio-input-check"></div>
<div class="label-container">
<label for="address-tmirddv" class="radio-label">
<p class="type">Radio</p>
<p class="details">Radio</p>
</label>
</div>
</div>
<div class="address-radio-element radio-element">
<input id="address-y4x3jr" name="address" type="radio" class="radio-input" value="dp">
<div class="radio-input-check"></div>
<div class="label-container">
<label for="address-y4x3jr" class="radio-label">
<p class="type">Radio</p>
<p class="details">Radio</p>
</label>
</div>
</div>
</div>
</div>
</div>
SCSS:
.address-radio {
width: 90%;
overflow: auto;
white-space: nowrap;
.address-radio-element {
display: inline-block;
padding: 12px;
border: 1px solid transparent;
border-radius: 4px;
background-color: $color-grey-lighter;
.label-container {
width: 224px;
margin-left: 7px;
}
}
}
While using % value in width:
While using px value: (Want to achieve result like this using %)
When you set width 100%. You most remove margin,padding and border of this div. If set padding,margi,border then you must write like this:
Width : calc (100% - 26px)
My work seems like above. The width of left one (img) and right one (button) is fixed, and that of middle one (textarea) should be flexible.
It has to work like max-width property is given to it.
When the size of the window shrinks, the size of the textarea should also be shrunk.
But max-width property doesn't work well in this case.
When the size of the window reaches the length of A, width of the textarea should be start shrinking, but it doesn't.
Instead, it starts shrinking when the width of the window reaches the length of B.
Below shows what happens when the window shrinks.
What should I do for this problem with css? Or do I need to use javascript?
html
<div id="div_target">
<p>
<img src="~~~"/>
</p>
<p>
<textarea id="target" cols="40"></textarea>
</p>
<p>
<input type="submit" value="등록"/>
</p>
</div>
css
#div_target{
width:60%;
}
#target{
max-width:60%;
}
If I understand correctly your problem is shrinking the width of textarea in the small size devices.
Try below structure:
<div class="col-xs-12 target">
<div >
<img src="~~~"/>
</div>
<div>
<textarea></textarea>
</div>
<div>
<input type="submit" value="등록"/>
</div>
</div>
.target{
text-align: center;
display: inline-block;
}
textarea{
width: 60%;
}
I believe you want to have the element inline in the "md" and "lg" so you can define:
display: inline-block;
for the elements in the large devices.
Here's one method using CSS flexbox:
#div_target{
display: flex;
width: 60%;
}
#div_target > * {
margin: 5px;
}
<div id="div_target">
<img src="http://placekitten.com/g/50/50">
<textarea id="target" cols="40"></textarea>
<input type="submit" value="등록" />
</div>
jsFiddle
.target{
text-align: center;
display:block;
}
textarea{
width: 60%;
}
<div class="col-xs-12 target">
<div >
<img src="http://orig05.deviantart.net/8ac4/f/2011/297/5/6/hammer_bro__by_yoshigo99-d4duynn.png"style="width:50px;height:50px;"/>
</div>
<div>
<textarea></textarea>
</div>
<div>
<input type="submit" value="등록"/>
</div>
</div>
What I need to do is a bit complicated to explain, but I'll do my best. I need to fit 3 different divs in one page, but my left div needs to have more space than the others, so aligning side by side is impractical, as is one on top of each other. I need one bigger div on the left, and the other two stacked on top of each other on the right. But I can't merge these two divs into one and float it. Because I need the top one to be vertically aligned on top of the left one, and the bottom one vertically aligned on bottom of the left one, while these 2 (top and bottom) need to be aligned on their right. Not sure if I was able to explain, so here is an image illustrating what I want to accomplish:
So, you see, left one taking most of the space, smaller ones aligned on top and bottom, while also aligned on their right side, and a blank space between then. Here's the code I already have:
<div style="display: inline-block;">
<h3>Left Div</h3>
<input type="text" name="name">
<input class="button" type="submit">
</div>
<div style="display: inline-block; vertical-align: top; width: auto; padding-left: 20px">
<h3>Top right div</h3>
<input type="text" name="name2">
</div>
<div style="display: inline-block; vertical-align: bottom; width: auto; padding-left: 20px;">
<h3>Bottom right div</h3>
<input type="text" name="name3">
<input class="button" type="button" onclick="window.location.replace('url')" value="Cancel">
</div>
I'd also like to say that in the middle of the way (when I only had 2 divs) it was working the way I wanted to, the problem arose when I added the third div, so I think that's where the problem is at. Please note that I'm new to html, I'm sorry if this is just a simple fix.
I think the key is the equal height part, which you can use CSS3 flexbox to solve it. For the right side top / bottom divs, you can wrap the two divs into another div. See the simple demo below.
jsFiddle
div {
border: 1px solid aqua;
}
.container {
display: flex;
}
.left, .right {
flex: 1;
}
.right {
display: flex;
flex-direction: column;
justify-content: space-between;
}
<div class="container">
<div class="left">
<h3>Left Div</h3>
<br><br><br><br><br><br><br><br><br><br>
</div>
<div class="right">
<div>
<h3>Top right div</h3>
</div>
<div>
<h3>Bottom right div</h3>
</div>
</div>
</div>
this is just the way you want it to be.... as the images..
<html>
<head>
<style>
#i{
background-color:"red";
width:700px;
height:600px;
float:left;
}
#a{
background-color:"black";
width:600px;
height:300px;
float:right;
position:relative;
display:inline;
}
#b{
background-color:"blue";
width:600px;
height:250px;
float:right;
margin-top:50px;
position:relative;
display:inline;
}
</style>
</head>
<body>
<div id = "i">
<p>hello</p>
</div>
<div id = "a">
<p>hello</p>
</div>
<div id = "b">
<p>hello</p>
</div>
</body>
</html>
One way is to use negative margin. The inline-block element is what's making it difficult to have multiple divs on the same vertical axis, because both are lining up with the larger div. This works for what you're asking:
<div id = "left" style="display: inline-block;">
<h3>Left Div</h3>
<input type="text" name="name">
<input class="button" type="submit">
</div>
<div id = "top-right" style="display: inline-block; vertical-align: top; width: auto; padding-left: 20px">
<h3>Top right div</h3>
<input type="text" name="name2">
</div>
<div id = "bottom-right" style="display: inline-block; vertical-align: bottom; margin-left: -182px">
<h3>Bottom right div</h3>
<input type="text" name="name3" >
<input class="button" type="button" onclick="window.location.replace('url')" value="Cancel">
</div>
fiddle: https://jsfiddle.net/an9ra3mb/2/
Within the structure below what is the best way to be able to align the div#logo into the middle of the grid_12 visible div for only non mobile devices.
Can I create a custom piece of code to override the above classes?
I have created a Plunker with my code - http://plnkr.co/edit/lrRm0nXdYaz5g7dYe4DS
HTML:
<header class="row visible">
<div class="grid_12 visible">
<div class="row logo-wrap">
<!-- logo -->
<div class="grid_6">
<div id="logo">
<img src="http://dev.jzm.co.nz/mytime/image/data/logo-black-web.png" title="My Time Candles" alt="My Time Candles" />
</div>
</div>
<!-- search -->
<div class="grid_6 visible">
<div id="search">
<div class="button-search">Search</div>
<input type="text" name="filter_name" value="Search ... " onclick="this.value = '';" onkeydown="this.style.color = '#000000';" />
</div><!--/search-->
</div>
</div><!--/row-->
</div><!--/grid_12-->
</header><!--End Header-->
Give the div with the id of logo a width and set its margin-left and margin-right css properties to auto.. also setting a max-width to 100% will ensure the responsive behaviour..
#logo{
width: 100%;
max-width: 300px; /* Original width of the logo image */
margin-left: auto;
margin-right: auto;
text-align: center;
float: left;
}
and i hope you have already done this but..
#logo img{
max-width: 100%;
height: auto;
}
UPDATE:
Modify your markup like so
<div id="container-top">
<div id="logo">
<img src="http://dev.jzm.co.nz/mytime/image/data/logo-black-web.png" title="My Time Candles" alt="My Time Candles">
</div>
<!-- search -->
<div id="search" class="visible">
<div class="button-search">Search</div>
<input type="text" name="filter_name" value="Search ... " onclick="this.value = '';" onkeydown="this.style.color = '#000000';">
</div>
<!--/search-->
</div>
#container-top{
position: relative;
}
#search{
top: 15%;
right: 0;
}
But then you'll have to use media queries to adjust your #search css as layout changes..
Also i have made some CSS changes above (before update section)..
Only you have to write one line margin: 0 auto;
#logo
{
margin:0 auto;
}