Outer DIV not shrink-wrapping - html

I have display inline-block etc. but the htmlDiv div in this mark-up does not behave as I expected. It behaves as if the inner divs are beside each other even when they are not. How to fix this?
Please run the animated snippet if it's not clear...
var demoContainer = d3.select('#demoContainer').style('width', '100px')
function tick() {
demoContainer.transition().duration(4000).style('width', '400px')
.transition().duration(4000).style('width', '600px')
.transition().duration(3000).style('width', '400px')
.transition().duration(3000).style('width', '100px')
.each('end', tick);
};
tick();
#htmlDiv {
font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif;
font-size: 12px;
outline: solid 1px black;
background-color: rgba(0, 0, 0, 0.25);
display: inline-block;
position: relative;
}
.container {
height: auto;
width: 100%;
display: inline-block;
position: relative;
}
.bubbles,
.subBubbles,
.span {
color: #ccc;
}
.select-bubbles,
.bubbles {
padding: 5px;
margin: 3px;
outline: solid 1px white;
background-color: rgb(114, 114, 114);
width: 150px;
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="demoContainer" style="outline: solid 3px red; padding: 10px">
<div id="htmlDiv">
I want this outer div to shrink-wrap the 4 inner divs regardless of width... <br>
<div class="container">
<div class="select-bubbles">
<select class="selector">
<option value="select">select</option>
<option value="selectAll">selectAll</option>
</select>
<select id="multi-single">
<option value="4">multi</option>
<option value="1">single</option>
</select>
<div class="select-subBubbles">
<select class="selector">
<option value="select">select</option>
<option value="selectAll" selected="selected">selectAll</option>
</select>
<span class="select-spans">
<select class="selector">
<option value="select">select</option>
<option value="selectAll">selectAll</option>
</select>
</span>
</div>
</div>
</div> <br>
<div class="bubbles bubble1">
bubble1
<div class="subBubbles bubble1">
<span>sub1</span>
<span class="spans bubble1">
<span style="transform: rotateX(0deg); color: rgb(0, 0, 0);" class="temp">
sub1
</span> subsub1
</span>
<span class="spans bubble2">subsub2</span>
</div>
<div class="subBubbles bubble2">
<span>
sub2
</span>
<span class="spans bubble1">
<span class="temp">
sub2
</span>
subsub1
</span>
</div>
</div>
<div class="bubbles bubble2">
bubble2
<div class="subBubbles bubble1">
sub1
<span class="spans bubble1">subsub1</span>
<span class="spans bubble2">subsub2</span>
</div>
<div class="subBubbles bubble2">
sub2
<span class="spans bubble1">subsub1</span>
<span class="spans bubble2">subsub2</span>
</div><div class="subBubbles bubble3">
sub3
<span class="spans bubble1">
subsub1
</span>
<span class="spans bubble2">
subsub2
</span>
</div>
</div>
<div class="bubbles bubble2">
bubble2
<div class="subBubbles bubble1">
sub1
<span class="spans bubble1">subsub1</span>
<span class="spans bubble2">subsub2</span>
</div>
<div class="subBubbles bubble2">
sub2
<span class="spans bubble1">subsub1</span>
<span class="spans bubble2">subsub2</span>
</div><div class="subBubbles bubble3">
sub3
<span class="spans bubble1">
subsub1
</span>
<span class="spans bubble2">
subsub2
</span>
</div>
</div>
</div>
</div>

The Problem with your were you were setting width for 250px in the below code
.select-bubbles, .bubbles {
padding: 5px;
margin: 3px;
outline: solid 1px white;
background-color: rgb(114, 114, 114);
/* width: 250px; */
/* display: inline-block; */
}
Remove the inline-block and setting your width to 250px which causes your box not to shrink less than 250px.
We are removing the inline-block for the time being if u want u can add it with some more properties to make it look good.

Your question is unclear but I think you want to do the following:
.container,
.select-bubbles,
.bubbles {
display: block;
}
Instead of inline-block.

Related

Position: sticky; not working no matter what

Trying to get a class to remain sticky and constantly be in view when the user scrolls down the page, but doesn't seem to work no matter what.
I tired:
.entry-summary{
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;}
But this does nothing.
The full code can be seen below and is part of this webpage https://aqwaa.net/product/constriction/:
<div class="qode-single-product-summary">
<div class="summary entry-summary">
<div class="clearfix">
<h1 class="product_title entry-title">Constriction</h1><p class="price"><span class="woocs_price_code" data-product-id="459"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">€</span>173.39</span></span></p>
<div class="woocommerce-product-details__short-description">
<p><strong>Mental Health Description: </strong>So often a symptom of anxiety is the feeling of a tightness or tension in the rib cage area. Anxiety has the ability to kick start your bodies fight or flight response, which can increase your stress which often leads to your bodies muscles to contract and tighten, hence, the ribcage tightness symptom. This piece is designed to bring awareness to how it feels inside for someone who is suffering with mental health problems.</p>
</div>
<form class="cart" action="https://aqwaa.net/product/constriction/" method="post" enctype="multipart/form-data">
<div class="quantity buttons_added">
<input type="button" value="-" class="minus">
<input type="text" id="quantity_5cba756e35068" step="1" min="1" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" aria-labelledby="Constriction quantity">
<input type="button" value="+" class="plus">
</div>
<button type="submit" name="add-to-cart" value="459" class="single_add_to_cart_button button alt single_add_to_cart_button qbutton button alt">Add to cart</button>
</form>
<div class="product_meta">
<span class="sku_wrapper">SKU: <span class="sku">AQ1007</span></span>
<span class="posted_in">Category: AQWAA</span>
<span class="tagged_as">Tag: Necklace</span>
</div>
<div class="q_accordion_holder toggle boxed woocommerce-accordion accordion ui-accordion ui-accordion-icons ui-widget ui-helper-reset" style="visibility: visible;">
<h6 class="title-holder clearfix description_tab ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom">
<span class="tab-title">Description</span>
</h6>
<div class="accordion_content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;">
<div class="accordion_content_inner">
<p><strong>Material Description:</strong> Produced in Dubai, UAE, the “Constriction” necklace is is .925 Sterling Silver finished in 18k Gold.</p>
<p><strong>Size:</strong> The pendant is 26.5 mm width – 27.3 mm height on a chain of X cm length.</p>
<style>.woocommerce-product-gallery__image{width: 100% !important;}</style>
</div>
</div>
<h6 class="title-holder clearfix additional_information_tab ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom">
<span class="tab-title">Additional Information</span>
</h6>
<div class="accordion_content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;">
<div class="accordion_content_inner">
<table class="woocommerce-product-attributes shop_attributes">
<tbody><tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--dimensions">
<th class="woocommerce-product-attributes-item__label">Dimensions</th>
<td class="woocommerce-product-attributes-item__value">26.5 × 27.3 mm</td>
</tr>
<tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--attribute_pa_gold">
<th class="woocommerce-product-attributes-item__label">Gold</th>
<td class="woocommerce-product-attributes-item__value"><p>18k Gold</p>
</td>
</tr>
<tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--attribute_pa_silver">
<th class="woocommerce-product-attributes-item__label">Silver</th>
<td class="woocommerce-product-attributes-item__value"><p>.925 Sterling Silver</p>
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
</div><!-- .clearfix -->
</div><!-- .summary -->
</div>
I expect the class .summary.entry-summary to remain visible as the user scrolls down the page, this does not happen.
Based on your code snippet, it looks as though the .entry-summary class belongs to one div, which is a single child element in a container.
The position:sticky can only allow the child to 'float' over sibling elements within the same container.
I copied your code into codepen, and added another blank <div> in your <div class="qode-single-product-summary"> to take up some vertical space and provide a sibling element, and it appears to be working just fine.
(Look for my comments "I added this" towards the bottom of your code)
Also if you run the snippet I provided, you should see the sticky property working until approximately half way down when the dummy div I added ends...
.entry-summary {
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 0;
}
/* i added this */
#spacefill {
height: 10000px;
}
<div class="qode-single-product-summary">
<div class="summary entry-summary">
<div class="clearfix">
<h1 class="product_title entry-title">Constriction</h1>
<p class="price"><span class="woocs_price_code" data-product-id="459"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">€</span>173.39</span>
</span>
</p>
<div class="woocommerce-product-details__short-description">
<p><strong>Mental Health Description: </strong>So often a symptom of anxiety is the feeling of a tightness or tension in the rib cage area. Anxiety has the ability to kick start your bodies fight or flight response, which can increase your stress
which often leads to your bodies muscles to contract and tighten, hence, the ribcage tightness symptom. This piece is designed to bring awareness to how it feels inside for someone who is suffering with mental health problems.</p>
</div>
<form class="cart" action="https://aqwaa.net/product/constriction/" method="post" enctype="multipart/form-data">
<div class="quantity buttons_added">
<input type="button" value="-" class="minus">
<input type="text" id="quantity_5cba756e35068" step="1" min="1" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" aria-labelledby="Constriction quantity">
<input type="button" value="+" class="plus">
</div>
<button type="submit" name="add-to-cart" value="459" class="single_add_to_cart_button button alt single_add_to_cart_button qbutton button alt">Add to cart</button>
</form>
<div class="product_meta">
<span class="sku_wrapper">SKU: <span class="sku">AQ1007</span></span>
<span class="posted_in">Category: AQWAA</span>
<span class="tagged_as">Tag: Necklace</span>
</div>
<div class="q_accordion_holder toggle boxed woocommerce-accordion accordion ui-accordion ui-accordion-icons ui-widget ui-helper-reset" style="visibility: visible;">
<h6 class="title-holder clearfix description_tab ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom">
<span class="tab-title">Description</span>
</h6>
<div class="accordion_content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;">
<div class="accordion_content_inner">
<p><strong>Material Description:</strong> Produced in Dubai, UAE, the “Constriction” necklace is is .925 Sterling Silver finished in 18k Gold.</p>
<p><strong>Size:</strong> The pendant is 26.5 mm width – 27.3 mm height on a chain of X cm length.</p>
<style>
.woocommerce-product-gallery__image {
width: 100% !important;
}
</style>
</div>
</div>
<h6 class="title-holder clearfix additional_information_tab ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom">
<span class="tab-title">Additional Information</span>
</h6>
<div class="accordion_content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;">
<div class="accordion_content_inner">
<table class="woocommerce-product-attributes shop_attributes">
<tbody>
<tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--dimensions">
<th class="woocommerce-product-attributes-item__label">Dimensions</th>
<td class="woocommerce-product-attributes-item__value">26.5 × 27.3 mm</td>
</tr>
<tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--attribute_pa_gold">
<th class="woocommerce-product-attributes-item__label">Gold</th>
<td class="woocommerce-product-attributes-item__value">
<p>18k Gold</p>
</td>
</tr>
<tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--attribute_pa_silver">
<th class="woocommerce-product-attributes-item__label">Silver</th>
<td class="woocommerce-product-attributes-item__value">
<p>.925 Sterling Silver</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="spacefill">
</div>
</div>
<!-- .clearfix -->
</div>
<!-- .summary -->
<div id="spacefill">
<!-- I added this -->
</div>
</div>
Here's the solution that worked best for me. You can see the final result on the webpage. Involves using position:fixed and some nifty z-index cheats.
.woocommerce-product-gallery__image{width: 100% !important;}
#media all and (min-width:1000px) {
.qode-single-product-summary {
position: fixed;
z-index: 110;
right: 113px;
width: 40%;
}
.woocommerce .summary {
float: right;
width: 100%;
margin-bottom: 45px;
}
.woocommerce ul.products {
background: #fff;
z-index: 999999999999999999999;
position: relative;
display: table;
}
.qode-single-product-summary {
position: fixed;
z-index: 110;
right: 113px;
width: 40%;
}
.woocommerce .summary {
float: right;
width: 100%;
margin-bottom: 45px;
}
.woocommerce ul.products {
background: #fff;
z-index: 999999999999999999999;
position: relative;
display: table;
margin: 0 0 0px;
}
.content_bottom {
padding-top: 80px;
background: #fff;
}
.woocommerce-page .content .container .container_inner {
padding-bottom: 0!important;
}
h2.qode-related-upsells-title {
z-index: 99999999999;
background: #fff;
padding-top: 0!important;
display: table;
position: relative;
width: 100%;
margin-bottom: 0!important;
padding-bottom: 34px;
}
}
#media all and (min-width:1500px) {
.qode-single-product-summary {
width: 1300px; right:initial;
}
.woocommerce .summary {
width: 500px;
}
}

Designing a select drop-down

this is a very simple issue, to which I can't find a solution. I've created a select drop-down. But, it appears like two controls. like:
-----------------
| ---------- | ------------
| Tax | |
| ---------- | ------------
-----------------
But my requirement is, it should be something like this:
---------- ----------
| Tax | |
---------- ----------
First one is a select button and the second is an empty textbox.
This is how I tried:
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-6">Tax Value</label>
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-btn">
<select type="button" class="btn btn-default dropdown-toggle align-right" id="tax_toggle" name="tax_toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Tax <span class="caret"></span></select>
</div>
<input type="text" id="invoice_request_tax_value" name="invoice_request_tax_value" class="form-control" placeholder="Tax Value" required="required" readonly="readonly">
</div>
</div>
</div>
</div>
I don't know what's wrong. Can someone help me to fix this?
Try something like the code given below, to create a custom drop down. (Change css property as per your requirement).
$("#timeToggler").on("click", function()
{
if($(".selectOption").is(":visible"))
{
$(".selectOption").hide();
}
else $(".selectOption").show();
})
.customSelect {
position: relative;
display: inline-block;
cursor: pointer;
border: 1px solid lightgrey;
}
.toggler
{
position:relative;
z-index:1!important;
width: auto;
padding: 0 15px;
background: #FFFFFF;
color: #797979;
display: inline-block;
}
.selectOption
{
position: absolute;
z-index: 22!important;
background: #FFFFFF;
border: 1px solid lightgrey;
margin-top: 1px;
padding: 4px 0px;
right:0px;
left:0px;
min-width:190px;
}
.padding15 {
padding: 0 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="customSelect">
<span class="toggler" id="timeToggler">
<span id="time">----</span>
<span style="margin-left:10px;display : inline-block;" class="caret"></span>
</span>
<div class="selectOption" style="display : none">
<div class="selectOptionRow" style="display: block;">
<span class="padding15">opt1</span>
</div>
<div class="selectOptionRow" style="display: block;">
<span class="padding15">opt2</span>
</div>
<div class="selectOptionRow" style="display: block;">
<span class="padding15">opt3</span>
</div>
</div>
</div>

How to insert a div between two divs?

I have two small divs at the two left and right corners of my page. There is a lot of space between them. I want to occupy all that space with another div.
Here is the CSS code:
.signatureBox{
border-radius: 5px;
border-width: 1px;
border-style: solid;
border-color: rgb(128, 128, 128);
min-width: 200px;
min-height: 65px;
padding: 3px;
display: block;'
}
and the HTML code:
<div class='signatureContainer'>
<span class='signatureBox' style='float: left;' >
<span>employee</span>
<hr style='margin-top: 70px;' />
<span>Role</span>
</span>
<span class='signatureBox' style='float: left'>
<span>employee</span>
<hr style='margin-top: 70px;' />
<span>Role</span>
</span>
<span class='signatureBox' style='float: right'>
<span> </span>
<hr style='margin-top: 70px;' />
<span> Master </span>
</span>
</div>
If you are trying to remove the space between them, you should simply set float to left on every one of them.
<div class='signatureContainer'>
<span class='signatureBox' style='float: left;' >
<span>employee</span>
<hr style='margin-top: 70px;' />
<span>Role</span>
</span>
<span class='signatureBox' style='float: left'>
<span>employee</span>
<hr style='margin-top: 70px;' />
<span>Role</span>
</span>
<span class='signatureBox' style='float: left'>
<span> </span>
<hr style='margin-top: 70px;' />
<span> Master </span>
</span>

Changing space and width in Chrome and Safari

I have this table which has some data (input & select etc...), When any option is not selected, the spacing is correct in all browsers, but when I click on the select the spacing will be changed only in Safari and Chrome but it won't change in Firefox.
Chrome BEFORE clicking on Select
Chrome AFTER clicking on Select
Firefox BEFORE&AFTER clicking on Select
I did not include any code because it works fine in Firefox, and I thought maybe it's some css issue regarding browsers which I should put in my styles, but if needed I will also put my codes.
UPDATE
I added also the codes:
Working jsFiddle
.rTableCell,
.rTableHead {
xfloat: left;
height: 36px;
overflow: hidden;
padding: 3px 3%;
width: 150px;
vertical-align: middle;
line-height: 120%;
display: table-cell;
}
.rTableCellId {
width: 52px;
}
.rTableCellVal {
width: 90px;
vertical-align: middle;
}
<div class="rTable">
<div class="rTableRow" style="color:#797979">
<div class="rTableCell rTableCellId ndLabel">835</div>
<div class="rTableCell ndLabel" style="width:240px;">Visits on the website that end with the purchase</div>
<div class="rTableCell ndLabel" style="width:160px;">LP thank you</div>
<div class="rTableCell rTableCellSrc ndLabel">GA</div>
<div class="rTableCell rTableCellUrlLoc" style="width:180px">
<input id="campaignStructureList0.dataSourceModelList0.urlLocation" name="campaignStructureList[0].dataSourceModelList[0].urlLocation" style="width: 145px;" class="ndInbox" type="text" value="" />
</div>
<div style="margin-top:7px; width: 150px" class="rTableCell rTableCellVal">
<select id="campaignGoalId" name="campaignStructureList[0].dataSourceModelList[0].goalId" style="width:100%">
<option value="">--- Select1 ---</option>
<option value="">--- Select2 ---</option>
</select>
</div>
</div>
<br />
</div>
One option is to set the select's containing div to position:relative;, and the select itself to position: absolute; That takes it out of the flow and thus prevents the resizing of elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.rTableCell,
.rTableHead {
xfloat: left;
height: 36px;
overflow: hidden;
padding: 3px 3%;
width: 150px;
vertical-align: middle;
line-height: 120%;
display: table-cell;
}
.rTableCellId {
width: 52px;
}
.rTableCellVal {
width: 90px;
vertical-align: middle;
}
.rTableCell {position: relative;}
.rTableCell select {position: absolute; left: 20px; top: 12px;}
</style>
</head>
<body>
<div class="rTable">
<div class="rTableRow" style="color:#797979">
<div class="rTableCell rTableCellId ndLabel">835</div>
<div class="rTableCell ndLabel" style="width:240px;">Visits on the website that end with the purchase</div>
<div class="rTableCell ndLabel" style="width:160px;">LP thank you</div>
<div class="rTableCell rTableCellSrc ndLabel">GA</div>
<div class="rTableCell rTableCellUrlLoc" style="width:180px">
<input id="campaignStructureList0.dataSourceModelList0.urlLocation" name="campaignStructureList[0].dataSourceModelList[0].urlLocation" style="width: 145px;" class="ndInbox" type="text" value="" />
</div>
<div style="margin-top:7px; width: 150px; " class="rTableCell rTableCellVal">
<select id="campaignGoalId" name="campaignStructureList[0].dataSourceModelList[0].goalId" >
<option value="">--- Select1 ---</option>
<option value="">--- Select2 ---</option>
</select>
</div>
</div>
<br />
</div>
</body>
</html>
A bit hackish, but if you're not opposed to using a little JavaScript, you can drop down the select on load and immediately close it back up.
window.onload=function(){
var sel = document.getElementById('campaignGoalId');
sel.size=sel.options.length;
sel.size = 1;
}
.rTableCell,
.rTableHead {
xfloat: left;
height: 36px;
overflow: hidden;
padding: 3px 3%;
width: 150px;
vertical-align: middle;
line-height: 120%;
display: table-cell;
}
.rTableCellId {
width: 52px;
}
.rTableCellVal {
width: 90px;
vertical-align: middle;
}
<div class="rTable">
<div class="rTableRow" style="color:#797979">
<div class="rTableCell rTableCellId ndLabel">835</div>
<div class="rTableCell ndLabel" style="width:240px;">Visits on the website that end with the purchase</div>
<div class="rTableCell ndLabel" style="width:160px;">LP thank you</div>
<div class="rTableCell rTableCellSrc ndLabel">GA</div>
<div class="rTableCell rTableCellUrlLoc" style="width:180px">
<input id="campaignStructureList0.dataSourceModelList0.urlLocation" name="campaignStructureList[0].dataSourceModelList[0].urlLocation" style="width: 145px;" class="ndInbox" type="text" value="" />
</div>
<div style="margin-top:7px; width: 150px" class="rTableCell rTableCellVal">
<select id="campaignGoalId" name="campaignStructureList[0].dataSourceModelList[0].goalId" style="width:100%">
<option value="">--- Select1 ---</option>
<option value="">--- Select2 ---</option>
</select>
</div>
</div>
</div>

div outside the parent div

i'm trying to create a page structure, but i have a problem with position of div.
I have 2 div (purple) into a div parent (red). And after parent div, another div (green). I want to have the green div bottom the red one.
But the browser show me the purple div not into the red one (their parent), and so the green div is not under the red and purple divs, but only under the red one.
I make a snippet to show you:
div#form {
background: red;
}
div#search {
background: yellow;
}
div.accostati {
float: left;
margin: 5px;
background: purple;
}
div#test {
background: green;
}
<div id="form">
<p> CERCA GOMME </p>
<div id="label-search" class="accostati">
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
</div>
<div class="accostati">
<form name="cercaGommeCasa" action="gommeincasa.php" method="POST">
<select name="marca">
<option value="1">1</option>
</select><br>
<select name="modello">
<option value="2">2</option>
</select> <br>
<input type="submit" value="CERCA">
</form>
</div>
</div>
<div id="test">
riga1 <br>
riga2 <br>
riga3 <br>
</div>
Have you any idea how to show the purple div into the red one, in order to have green div under both purple and red divs...
Thank you!
Add overflow:auto to div#form:
div#form {
background: red;
overflow:auto;
}
div#form {
background: red;
overflow:auto;
}
div#search {
background: yellow;
}
div.accostati {
float: left;
margin: 5px;
background: purple;
}
div#test {
background: green;
}
<div id="form">
<p> CERCA GOMME </p>
<div id="label-search" class="accostati">
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
</div>
<div class="accostati">
<form name="cercaGommeCasa" action="gommeincasa.php" method="POST">
<select name="marca">
<option value="1">1</option>
</select><br>
<select name="modello">
<option value="2">2</option>
</select> <br>
<input type="submit" value="CERCA">
</form>
</div>
</div>
<div id="test">
riga1 <br>
riga2 <br>
riga3 <br>
</div>
You can use display: inline-block for both those divs
Like this
div#form {
background: red;
display: inline-block;
}
div.accostati {
display: inline-block;
margin: 5px;
background: purple;
}
div#form {
background: red;
display: inline-block;
}
div#search {
background: yellow;
}
div.accostati {
display: inline-block;
margin: 5px;
background: purple;
}
div#test {
background: green;
}
<div id="form">
<p> CERCA GOMME </p>
<div id="label-search" class="accostati">
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
</div>
<div class="accostati">
<form name="cercaGommeCasa" action="gommeincasa.php" method="POST">
<select name="marca">
<option value="1">1</option>
</select><br>
<select name="modello">
<option value="2">2</option>
</select> <br>
<input type="submit" value="CERCA">
</form>
</div>
</div>
<div id="test">
riga1 <br>
riga2 <br>
riga3 <br>
</div>