Styjun

A steel cutting sword?

Count rotary dial pulses in a phone number (including letters)

Python program to take in two strings and print the larger string

Can I connect my older mathematica front-end to the free wolfram engine?

Is it true that cut time means "play twice as fast as written"?

Is the field of q-series 'dead'?

Is Jon Snow the last of his House?

Can I tell a prospective employee that everyone in the team is leaving?

What is a Power on Reset IC?

Is the Indo-European language family made up?

Pirate democracy at its finest

How to cut a climbing rope?

Did 20% of US soldiers in Vietnam use heroin, 95% of whom quit afterwards?

Website returning plaintext password

Is it legal to meet with potential future employers in the UK, whilst visiting from the USA

How should I introduce map drawing to my players?

Where have Brexit voters gone?

Using credit/debit card details vs swiping a card in a payment (credit card) terminal

How to let other coworkers know that I don't share my coworker's political views?

How to deal with a colleague who is being aggressive?

Apt - strange requests to d16r8ew072anqo.cloudfront.net:80

How to respond to upset student?

How to politely tell someone they did not hit "reply to all" in an email?

Why did Theresa May offer a vote on a second Brexit referendum?

make multiple divs surround a circle at center with responsive for mobile devices

Make a div fill the height of the remaining screen spaceHow to horizontally center a <div>?Using jQuery to center a DIV on the screenHow to vertically center a div for all browsers?How to make div not larger than its contents?How to make a div 100% height of the browser window?How to center absolutely positioned element in div?multicolumn css make the adjacent div in same heightDisplay css columns in horizontal order instead of verticalHow can I position four divs in a responsive manner?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

I want the divs inside the div boxes to surround the circle image and I want to make this responsive for mobile display. I mean I want to view the divs surrounding circle in mobile device too. And here is my code-

<div class="circle">
 <img src="images/circle.jpg height="500px" width="500px" alt="circle">
 <div class="boxes">
 <div class="box1"></div>
 <div class="box2"></div>
 <div class="box3"></div>
 <div class="box4"></div>
 </div>
</div>

The following is the css I used-

<style>
 .circleposition:relative
 .circle imgmax-width:100%; height:auto
 .boxesposition:absolute; top:0; left:0
 .boxes divheight:50px; width:50px; display:inline-block
</style>

html css geometry

share|improve this question

edited Jul 1 '15 at 15:28

Sushil Thapa

asked Jul 1 '15 at 15:08

Sushil ThapaSushil Thapa

5810

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  maybe this will help? w3schools.com/cssref/css3_pr_transform-origin.asp
  
  – aahhaa
  Jul 1 '15 at 15:12
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Can you include a jsfiddle/codepen of your code and an image of what your intended result might look like?
  
  – codedude
  Jul 1 '15 at 15:28
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i am doing this to make a html casino table at center and players div surrounding it and responsive for mobile
  
  – Sushil Thapa
  Jul 1 '15 at 15:58
  

  
  
  
  

add a comment | 

0

I want the divs inside the div boxes to surround the circle image and I want to make this responsive for mobile display. I mean I want to view the divs surrounding circle in mobile device too. And here is my code-

<div class="circle">
 <img src="images/circle.jpg height="500px" width="500px" alt="circle">
 <div class="boxes">
 <div class="box1"></div>
 <div class="box2"></div>
 <div class="box3"></div>
 <div class="box4"></div>
 </div>
</div>

The following is the css I used-

<style>
 .circleposition:relative
 .circle imgmax-width:100%; height:auto
 .boxesposition:absolute; top:0; left:0
 .boxes divheight:50px; width:50px; display:inline-block
</style>

html css geometry

share|improve this question

edited Jul 1 '15 at 15:28

Sushil Thapa

asked Jul 1 '15 at 15:08

Sushil ThapaSushil Thapa

5810

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  maybe this will help? w3schools.com/cssref/css3_pr_transform-origin.asp
  
  – aahhaa
  Jul 1 '15 at 15:12
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Can you include a jsfiddle/codepen of your code and an image of what your intended result might look like?
  
  – codedude
  Jul 1 '15 at 15:28
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i am doing this to make a html casino table at center and players div surrounding it and responsive for mobile
  
  – Sushil Thapa
  Jul 1 '15 at 15:58
  

  
  
  
  

add a comment | 

I want the divs inside the div boxes to surround the circle image and I want to make this responsive for mobile display. I mean I want to view the divs surrounding circle in mobile device too. And here is my code-

<div class="circle">
 <img src="images/circle.jpg height="500px" width="500px" alt="circle">
 <div class="boxes">
 <div class="box1"></div>
 <div class="box2"></div>
 <div class="box3"></div>
 <div class="box4"></div>
 </div>
</div>

The following is the css I used-

<style>
 .circleposition:relative
 .circle imgmax-width:100%; height:auto
 .boxesposition:absolute; top:0; left:0
 .boxes divheight:50px; width:50px; display:inline-block
</style>

html css geometry

share|improve this question

edited Jul 1 '15 at 15:28

Sushil Thapa

asked Jul 1 '15 at 15:08

Sushil ThapaSushil Thapa

5810

<div class="circle">
 <img src="images/circle.jpg height="500px" width="500px" alt="circle">
 <div class="boxes">
 <div class="box1"></div>
 <div class="box2"></div>
 <div class="box3"></div>
 <div class="box4"></div>
 </div>
</div>

<style>
 .circleposition:relative
 .circle imgmax-width:100%; height:auto
 .boxesposition:absolute; top:0; left:0
 .boxes divheight:50px; width:50px; display:inline-block
</style>

share|improve this question

edited Jul 1 '15 at 15:28

Sushil Thapa

asked Jul 1 '15 at 15:08

Sushil ThapaSushil Thapa

5810

share|improve this question

edited Jul 1 '15 at 15:28

Sushil Thapa

asked Jul 1 '15 at 15:08

Sushil ThapaSushil Thapa

5810

asked Jul 1 '15 at 15:08

Sushil ThapaSushil Thapa

5810

asked Jul 1 '15 at 15:08

Sushil ThapaSushil Thapa

5810

1 Answer
1

active

oldest

votes

0

Try this this will work

<html>
 <head>
 <title>TODO supply a title</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style>
 .divname
 height: 200px;
 width: 32%;
 border:1px solid red;
 float: left;
 
 .notadiv
 visibility: hidden;
 
 </style>
 <script>
 function setwidth() 
 var part = (window.innerWidth / 3) - 30;
 function setwidth() 
 var part = (window.innerWidth / 3) - 30;
 alert(part.toString());
 var x = document.getElementsByClassName("divname");
 var i;
 for (i = 0; i < x.length; i++) 
 x[i].style.width = part.toString();
 
 
 
 </script>
 </head>
 <body onresize="setwidth();">
 <div style="text-align: center;">
 <div class='divname notadiv' ></div>
 <div class='divname' >1</div>
 <div class='divname notadiv' ></div>
 <div class='divname' >2</div>
 <div class='divname' style="background-image: url('images/circle.jpg');border:0px solid transparent;background-size: contain;background-repeat: no-repeat;background-position: center;"></div>
 <div class='divname' >3</div>
 <div class='divname notadiv' ></div>
 <div class='divname' >4</div>
 <div class='divname notadiv' ></div>
 </div>
 </body>
 </html>

share|improve this answer

edited Mar 24 at 2:05

Julian Schmuckli

1,56332242

answered Jul 1 '15 at 17:17

G4uKu3_GauravG4uKu3_Gaurav

476321

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes! it worked. Thanks a lot for solving my problem. Thank you so much.
  
  – Sushil Thapa
  Jul 1 '15 at 18:31
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  my job @Sushil Thapa
  
  – G4uKu3_Gaurav
  Jul 1 '15 at 19:01
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f31165146%2fmake-multiple-divs-surround-a-circle-at-center-with-responsive-for-mobile-device%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Try this this will work

<html>
 <head>
 <title>TODO supply a title</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style>
 .divname
 height: 200px;
 width: 32%;
 border:1px solid red;
 float: left;
 
 .notadiv
 visibility: hidden;
 
 </style>
 <script>
 function setwidth() 
 var part = (window.innerWidth / 3) - 30;
 function setwidth() 
 var part = (window.innerWidth / 3) - 30;
 alert(part.toString());
 var x = document.getElementsByClassName("divname");
 var i;
 for (i = 0; i < x.length; i++) 
 x[i].style.width = part.toString();
 
 
 
 </script>
 </head>
 <body onresize="setwidth();">
 <div style="text-align: center;">
 <div class='divname notadiv' ></div>
 <div class='divname' >1</div>
 <div class='divname notadiv' ></div>
 <div class='divname' >2</div>
 <div class='divname' style="background-image: url('images/circle.jpg');border:0px solid transparent;background-size: contain;background-repeat: no-repeat;background-position: center;"></div>
 <div class='divname' >3</div>
 <div class='divname notadiv' ></div>
 <div class='divname' >4</div>
 <div class='divname notadiv' ></div>
 </div>
 </body>
 </html>

share|improve this answer

edited Mar 24 at 2:05

Julian Schmuckli

1,56332242

answered Jul 1 '15 at 17:17

G4uKu3_GauravG4uKu3_Gaurav

476321

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes! it worked. Thanks a lot for solving my problem. Thank you so much.
  
  – Sushil Thapa
  Jul 1 '15 at 18:31
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  my job @Sushil Thapa
  
  – G4uKu3_Gaurav
  Jul 1 '15 at 19:01
  

  
  
  
  

add a comment | 

0

Try this this will work

<html>
 <head>
 <title>TODO supply a title</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style>
 .divname
 height: 200px;
 width: 32%;
 border:1px solid red;
 float: left;
 
 .notadiv
 visibility: hidden;
 
 </style>
 <script>
 function setwidth() 
 var part = (window.innerWidth / 3) - 30;
 function setwidth() 
 var part = (window.innerWidth / 3) - 30;
 alert(part.toString());
 var x = document.getElementsByClassName("divname");
 var i;
 for (i = 0; i < x.length; i++) 
 x[i].style.width = part.toString();
 
 
 
 </script>
 </head>
 <body onresize="setwidth();">
 <div style="text-align: center;">
 <div class='divname notadiv' ></div>
 <div class='divname' >1</div>
 <div class='divname notadiv' ></div>
 <div class='divname' >2</div>
 <div class='divname' style="background-image: url('images/circle.jpg');border:0px solid transparent;background-size: contain;background-repeat: no-repeat;background-position: center;"></div>
 <div class='divname' >3</div>
 <div class='divname notadiv' ></div>
 <div class='divname' >4</div>
 <div class='divname notadiv' ></div>
 </div>
 </body>
 </html>

share|improve this answer

edited Mar 24 at 2:05

Julian Schmuckli

1,56332242

answered Jul 1 '15 at 17:17

G4uKu3_GauravG4uKu3_Gaurav

476321

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes! it worked. Thanks a lot for solving my problem. Thank you so much.
  
  – Sushil Thapa
  Jul 1 '15 at 18:31
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  my job @Sushil Thapa
  
  – G4uKu3_Gaurav
  Jul 1 '15 at 19:01
  

  
  
  
  

add a comment | 

Try this this will work

<html>
 <head>
 <title>TODO supply a title</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style>
 .divname
 height: 200px;
 width: 32%;
 border:1px solid red;
 float: left;
 
 .notadiv
 visibility: hidden;
 
 </style>
 <script>
 function setwidth() 
 var part = (window.innerWidth / 3) - 30;
 function setwidth() 
 var part = (window.innerWidth / 3) - 30;
 alert(part.toString());
 var x = document.getElementsByClassName("divname");
 var i;
 for (i = 0; i < x.length; i++) 
 x[i].style.width = part.toString();
 
 
 
 </script>
 </head>
 <body onresize="setwidth();">
 <div style="text-align: center;">
 <div class='divname notadiv' ></div>
 <div class='divname' >1</div>
 <div class='divname notadiv' ></div>
 <div class='divname' >2</div>
 <div class='divname' style="background-image: url('images/circle.jpg');border:0px solid transparent;background-size: contain;background-repeat: no-repeat;background-position: center;"></div>
 <div class='divname' >3</div>
 <div class='divname notadiv' ></div>
 <div class='divname' >4</div>
 <div class='divname notadiv' ></div>
 </div>
 </body>
 </html>

share|improve this answer

edited Mar 24 at 2:05

Julian Schmuckli

1,56332242

answered Jul 1 '15 at 17:17

G4uKu3_GauravG4uKu3_Gaurav

476321

<html>
 <head>
 <title>TODO supply a title</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style>
 .divname
 height: 200px;
 width: 32%;
 border:1px solid red;
 float: left;
 
 .notadiv
 visibility: hidden;
 
 </style>
 <script>
 function setwidth() 
 var part = (window.innerWidth / 3) - 30;
 function setwidth() 
 var part = (window.innerWidth / 3) - 30;
 alert(part.toString());
 var x = document.getElementsByClassName("divname");
 var i;
 for (i = 0; i < x.length; i++) 
 x[i].style.width = part.toString();
 
 
 
 </script>
 </head>
 <body onresize="setwidth();">
 <div style="text-align: center;">
 <div class='divname notadiv' ></div>
 <div class='divname' >1</div>
 <div class='divname notadiv' ></div>
 <div class='divname' >2</div>
 <div class='divname' style="background-image: url('images/circle.jpg');border:0px solid transparent;background-size: contain;background-repeat: no-repeat;background-position: center;"></div>
 <div class='divname' >3</div>
 <div class='divname notadiv' ></div>
 <div class='divname' >4</div>
 <div class='divname notadiv' ></div>
 </div>
 </body>
 </html>

<html>
 <head>
 <title>TODO supply a title</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style>
 .divname
 height: 200px;
 width: 32%;
 border:1px solid red;
 float: left;
 
 .notadiv
 visibility: hidden;
 
 </style>
 <script>
 function setwidth() 
 var part = (window.innerWidth / 3) - 30;
 function setwidth() 
 var part = (window.innerWidth / 3) - 30;
 alert(part.toString());
 var x = document.getElementsByClassName("divname");
 var i;
 for (i = 0; i < x.length; i++) 
 x[i].style.width = part.toString();
 
 
 
 </script>
 </head>
 <body onresize="setwidth();">
 <div style="text-align: center;">
 <div class='divname notadiv' ></div>
 <div class='divname' >1</div>
 <div class='divname notadiv' ></div>
 <div class='divname' >2</div>
 <div class='divname' style="background-image: url('images/circle.jpg');border:0px solid transparent;background-size: contain;background-repeat: no-repeat;background-position: center;"></div>
 <div class='divname' >3</div>
 <div class='divname notadiv' ></div>
 <div class='divname' >4</div>
 <div class='divname notadiv' ></div>
 </div>
 </body>
 </html>

<html>
 <head>
 <title>TODO supply a title</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style>
 .divname
 height: 200px;
 width: 32%;
 border:1px solid red;
 float: left;
 
 .notadiv
 visibility: hidden;
 
 </style>
 <script>
 function setwidth() 
 var part = (window.innerWidth / 3) - 30;
 function setwidth() 
 var part = (window.innerWidth / 3) - 30;
 alert(part.toString());
 var x = document.getElementsByClassName("divname");
 var i;
 for (i = 0; i < x.length; i++) 
 x[i].style.width = part.toString();
 
 
 
 </script>
 </head>
 <body onresize="setwidth();">
 <div style="text-align: center;">
 <div class='divname notadiv' ></div>
 <div class='divname' >1</div>
 <div class='divname notadiv' ></div>
 <div class='divname' >2</div>
 <div class='divname' style="background-image: url('images/circle.jpg');border:0px solid transparent;background-size: contain;background-repeat: no-repeat;background-position: center;"></div>
 <div class='divname' >3</div>
 <div class='divname notadiv' ></div>
 <div class='divname' >4</div>
 <div class='divname notadiv' ></div>
 </div>
 </body>
 </html>

share|improve this answer

edited Mar 24 at 2:05

Julian Schmuckli

1,56332242

answered Jul 1 '15 at 17:17

G4uKu3_GauravG4uKu3_Gaurav

476321

edited Mar 24 at 2:05

Julian Schmuckli

1,56332242

edited Mar 24 at 2:05

Julian Schmuckli

1,56332242

answered Jul 1 '15 at 17:17

G4uKu3_GauravG4uKu3_Gaurav

476321

answered Jul 1 '15 at 17:17

G4uKu3_GauravG4uKu3_Gaurav

476321